Casi todos tienen experiencia de compras en línea. Algunos sitios web tienen una función de lupa de lupa de productos. Cuando mueva el mouse a la imagen, habrá otra imagen grande al lado, que es equivalente al efecto de lupa. ¿Cómo se puede lograr tal efecto? Le enviaré el código, por favor, consultelo.
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> lupa </title> <style>*{margin: 0; padding: 0;} #warp {ancho: 1184px; altura: 500px; margen: 50px Auto 0; #ccccccccccccccc. 10px; posición: relativo;}#warp #minbox {width: 350px; altura: 350px; float: izquierda; posición: relativa;}#maxbox {width: 400px; altura: 400px; posición: absoluto; izquierda: 380px; overflow: hidden; display: none;}#maxbox {width: 8000000000000px; 800px; posición: absoluto;}#con {float: izquierda; margin-left: 20px;}#Meng {width: 175px; altura: 175px; posición: absoluto; en segundo plano: amarillo; opacidad: 0.4; filtro: alfa (opacidad = 40); izquierda: 0; arriba: 0; display: no;} </syle> </body> <filt <div Id = " id = "minbox"> <img src = "imágenes/min.jpg"> <p id = "meng"> </p> </div> <div id = "maxbox"> <img src = "images/max.jpg"> </div> <iv id = "enh minbox = document.getElementById ('minbox'); var Meng = document.getElementById ('Meng'); var maxbox = document.getElementById ('maxbox'); var maximg = maxbox.getElementsByTagName ('img') [0]; var miminbox = minbox.getEngetElementsByTagName ('img') [0]; Ofl = 0, oft = 0; while (obj) {ofl+= obj.OffSetleft+obj.clientleft; oft+= obj.OffSettop+obj.clientTop; obj = obj.OffSetParent;} return {izquierda: ofl, top: oft};} minbous.onmouseMove = function (var) { e = e || window.event; meng.style.display = 'block'; maxbox.style.display = 'block'; var niubi1 = e.clientx offsettl (minbox) .left-meng.clientwidth/2; // x coordinado de máscara var niubi2 = e.clienty offsettl (minbox) .top-mengmeng. coordenada de la máscara var bili = maximg.clientwidth/minmg.clientwidth; if (niuBi1 <= 0) {niubi1 = 0;} else if (niubi1> = minbox.clientwidth-meng.clientwidth) {niubi1 = minbox.clientwidth-meng.clientwidth;} (niube <niube <niubi1 = 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';maximg.style.left=-parseInt(meng.styl e.left)*bili+'px'; maximg.style.top = -parseInt (Meng.style.top)*bili+'px';} minbox.onmouseOut = function () {Meng.style.display = 'none'; maxbox.style.display = 'none';} </script> </body> </html>Lo anterior es el efecto de la lupa del sitio web de compras basado en JavaScript introducido a usted. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!