Quase todo mundo tem experiência em fazer compras online. Alguns sites têm uma função de lupa de produto. Quando você move o mouse para a imagem, haverá outra imagem grande ao lado dela, o que é equivalente ao efeito da lupa. Como esse efeito pode ser alcançado? Vou enviar o código para você, consulte -o.
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Glass de lupa 10px; posição: relativa;}#Warp #MinBox {Width: 350px; altura: 350px; flutuante: esquerda; posição: relativa;}#maxbox {width: 400px; altura: 400px; posição: absoluto; esquerda: 380px; Overflow: Hiddn; Absolute;}#con {float: esquerda; margem-esquerda: 20px;}#Meng {Width: 175px; altura: 175px; posição: absoluto; colorido de fundo: amarelo; opacidade: 0,4; filtro: alfa (opacidade = 40); esquerda: 0; top: 0; exibir: nenhum; id = "MinBox"> <img src = "imagens/min.jpg"> <p id = "meng"> </p> </div> <div id = "maxbox"> <img src = "imagens/max.jpg"> </div = "Con"> <img src = "imagens/mss. MinBox = document.getElementById ('MinBox'); var Meng = document.getElementById ('Meng'); var maxbox = document.getElementById ('maxbox'); var maximg = maxbox.getElementsByTyTAGName ('img') [0]; Varmg = MinBox.getElementsByMyMentsByTAgName ('IMG') [0]; ofl = 0, oft = 0; while (obj) {ofl+= obj.offsetleft+obj.clientleft; oft+= obj.offsettop+obj.clienttop; obj = obj.offsetParent;} return {lesft: ofl, top:};};} var e = e || window.event; meng.style.display = 'block'; maxbox.style.display = 'block'; var niubi1 = e.clientx-offsettl (minbox) .left-meng.clientwidth/2; // x coordenada de máscara var niubi2 = e.clienty-offsettl (minbox) .top-meng.clientHeight/2; // y coordenada da máscara var bili = maximg.clientWidth/minimg.clientWidth; if (niubi1 <= 0) {niubi1 = 0;} se (niubi1> {niubi1 = MinBox.clientWidth-meng.clientWidth;} if (niubi2 <= 0) {niubi2 = 0;} else if (niubi2> = minbox.clientHeight-meng.clientHeight) {niubi2 = MinBox.clientHeight-meng.clientHeight;} console.log (niubi1); console.log (niubi2); meng.style.left = niubi1+'px'; meng.style.top = niubi2+pX '; maxty.tyft (meng e.left)*bili+'px'; maximg.style.top = -ParseInt (meng.style.top)*bili+'px';} minbox.onMouseOut = function () {meng.style.display = 'none';O exposto acima é o efeito da lupa do site de compras com base no JavaScript apresentado a você. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!