Cet article partage l'effet d'élargissement de l'image de JS pour votre référence. Le contenu spécifique est le suivant
<! Doctype html> <html> <éadf> <meta charset = "utf-8" /> <t titre> </ title> <style type = "text / css"> # div1 {width: 300px; hauteur: 300px; Position: relative; marge: 30px auto 0px; } # div1 img {width: 300px; } # div1 span {width: 150px; hauteur: 150px; Contexte: rouge; Position: absolue; gauche: 0px; En haut: 0px; Affichage: aucun; Opacité: 0,2; } .show {largeur: 100%; hauteur: 100%; Contexte: rouge; Position: absolue; gauche: 0px; En haut: 0px; Z-Index: 10px; Opacité: 0,1; } # div2 {largeur: 300px; hauteur: 300px; Position: relative; En haut: -300px; Gauche: 300px; Affichage: aucun; débordement: caché; marge: 0px auto 0px; } # img1 {position: absolue; } </ style> </ head> <body> <div id = "div1"> <! - Photo -> <img src = "images / xiangqing.png"> <! - Box de la souris -> <span> </span> <! - Background -> <div> </ div> </ div> <div id = "div2 "> <! - zoom-in-pict -> <img id =" img1 " src = "images / xiangqingda.png" /> </div> </body> <script> // Une fois le chargement terminé, window.onload = function () {var odiv = document.getElementById ('div1'); var osshow = document.getElementsByClassName ('show') [0]; var ospan = document.getElementsByTagName ('span') [0]; var oimg = document.getElementById ('img1'); // parentNode obtient le nœud parent osshow.onmouseOver = function () {ospan.style.display = 'block'; oimg.parentnode.style.display = 'bloc'; }; osshow.onmouseout = function () {oSpan.style.display = ''; oimg.parentnode.style.display = ''; }; // L'amplificateur déplace Oshow.OnMouSemove = fonction (ev) {// résoudre les problèmes de compatibilité du navigateur var oevent = ev || événement; // Obtenez la position de la souris var x = oevent.offsetx -ospan.offsetwidth / 2; var y = oevent.offsety-eSpan.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> osshow.offsetWidth-Ospan.offsetWidth) {x = osshow.offsetWidth-Ospan.offsetWidth; } if (y <0) {y = 0; } else if (y> osshow.offsetheight-span.offsetheight) {y = osshow.offsetheight-span.offsetheight; } // Positionnez la boîte sélectionnée OSPAN.STYLE.LEFT = X + 'PX'; OSPAN.STYLE.TOP = Y + 'PX'; // Positionnez l'amplificateur var %x = x / (Oshow.offsetWidth-Ospan.offsetWidth); var percosy = y / (osshow.offsetheight-span.offsetheight); var oimgparent = oimg.parentNode; oimg.style.left = -percentx * (oimg.offsetwidth-oimgparent.offsetwidth) + 'px'; OIMG.STYLE.TOP = -PERCETY * (OIMG.OFFSETHEight-oimgparent.offsetheight) + 'px'; }; }; }; </cript> </html>Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.