Эта статья разделяет эффект увеличения изображения JS для вашей ссылки. Конкретный контент заключается в следующем
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> </title> <style type = "text/css"> #div1 {width: 300px; Высота: 300px; позиция: относительно; Полевая: 30px Auto 0px; } #div1 img {width: 300px; } #div1 span {width: 150px; Высота: 150px; Фон: красный; позиция: абсолютно; слева: 0px; Верх: 0px; дисплей: нет; непрозрачность: 0,2; } .show {ширина: 100%; высота: 100%; Фон: красный; позиция: абсолютно; слева: 0px; Верх: 0px; Z-Index: 10px; непрозрачность: 0,1; } #div2 {width: 300px; Высота: 300px; позиция: относительно; Верх: -300PX; Слева: 300px; дисплей: нет; переполнение: скрыто; поля: 0PX Auto 0px; } #img1 {position: Absolute; } </style> </head> <body> <div id = "div1"> <!-Picture-> <img src = "Images/xiangqing.png"> <!-флажок мыши-> <pan> </span> <!-Фон-> <div> </div> </div> <div id = "> <! src = "Images/xiangqingda.png"/> </div> </body> <script> // после завершения загрузки, 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 получает родительский узел oshow.onmouseover = function () {ospan.style.display = 'block'; oimg.parentnode.style.display = 'block'; }; oshow.onmouseout = function () {ospan.style.display = ''; oimg.parentnode.style.display = ''; }; // усилитель перемещает oshow.onmouseMove = function (ev) {// Решение вопросов совместимости браузера var oevent = ev || event; // Получить положение мыши 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-ospan.offsetheight) {y = oshow.offsetheight-ospan.offsetheight; } // позиционировать выбранную коробку ospan.style.left = x+'px'; ospan.style.top = y+'px'; // позиционировать усилитель var penootx = x/(oshow.offsetwidth-ospan.offsetwidth); var outloy = 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>Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.