Este artículo comparte el efecto de ampliación de la imagen de JS para su referencia. El contenido específico es el siguiente
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> </title> <style type = "text/css"> #div1 {width: 300px; Altura: 300px; Posición: relativo; Margen: 30px Auto 0px; } #div1 img {ancho: 300px; } #div1 span {ancho: 150px; Altura: 150px; Antecedentes: rojo; Posición: Absoluto; Izquierda: 0px; arriba: 0px; Pantalla: ninguno; Opacidad: 0.2; } .show {ancho: 100%; Altura: 100%; Antecedentes: rojo; Posición: Absoluto; Izquierda: 0px; arriba: 0px; Índice Z: 10px; Opacidad: 0.1; } #div2 {ancho: 300px; Altura: 300px; Posición: relativo; arriba: -300px; Izquierda: 300px; Pantalla: ninguno; desbordamiento: oculto; margen: 0px auto 0px; } #img1 {posición: absoluto; } </style> </head> <body> <div id = "div1"> <!-imagen-> <img src = "imágenes/xiangqing.png"> <!-casilla de verificación de mouse-> <span> </span> <!-fondo-> <div> </div> <d div id = "div2"> <! src = "imágenes/xiangqingda.png"/> </div> </body> <script> // después de que se complete la carga, window.onload = function () {var odiv = document.getElementById ('div1'); var oshow = document.getElementsByClassName ('show') [0]; var oSpan = document.getElementsByTagName ('span') [0]; var oimg = document.getElementById ('img1'); // ParentNode obtiene el nodo principal oshow.onmouseover = function () {oSpan.style.display = 'block'; oimg.parentnode.style.display = 'block'; }; oshow.onmouseOut = function () {oSpan.style.display = ''; oimg.parentnode.style.display = ''; }; // El amplificador mueve oshow.onmouseMove = function (ev) {// resolver problemas de compatibilidad del navegador var oevent = ev || evento; // Obtener la posición del mouse var x = oevent.offsetx-ospan.offsetwidth/2; var y = oevent.offsety-oSpan.Offsetheight/2; // console.log (oevent.clienty); // console.log (odiv.offsettop); // console.log (ospan.offsetheight/2); // console.log (oevent.clienty); if (x <0) {x = 0; } else if (x> oshow.offsetwidth-ospan.offsetwidth) {x = oshow.offsetwidth-ospan.offsetwidth; } if (y <0) {y = 0; } else if (y> oshow.offsetheight-span.offsetheight) {y = oshow.offsetheight-ospan.offsetheight; } // coloca el cuadro seleccionado oSpan.style.left = x+'Px'; oSpan.style.top = y+'px'; // Posicione el amplificador var porcentx = x/(oshow.offsetwidth-ospan.offsetwidth); var porcentaje = y/(oshow.offsetheight-ospan.offsetheight); var oimgParent = oimg.ParentNode; oimg.style.left = -percentx*(oimg.offsetwidth-oimgparent.offsetwidth)+'px'; oimg.style.top = -percenty*(oimg.offsetheight-oimgparent.offsetheight)+'px'; }; }; }; </script> </html>Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.