Dieser Artikel teilt den Bildvergrößerungseffekt von JS für Ihre Referenz. Der spezifische Inhalt ist wie folgt
<! DocType html> <html> <head> <meta charset = "utf-8"/> <title> </title> <style type = "text/css"> #div1 {width: 300px; Höhe: 300px; Position: Relativ; Rand: 30px Auto 0px; } #div1 img {width: 300px; } #div1 span {width: 150px; Höhe: 150px; Hintergrund: Rot; Position: absolut; links: 0px; Oben: 0px; Anzeige: Keine; Opazität: 0,2; } .show {width: 100%; Höhe: 100%; Hintergrund: Rot; Position: absolut; links: 0px; Oben: 0px; Z-Index: 10px; Opazität: 0,1; } #div2 {width: 300px; Höhe: 300px; Position: Relativ; Oben: -300px; links: 300px; Anzeige: Keine; Überlauf: versteckt; Rand: 0px Auto 0px; } #img1 {Position: absolut; } </style> </head> <body> <div1 = "div1"> <!-picture-> <img src = "bilder/xiangqing.png"> <!-MOuse Kontrollkästchen-> <span> </span> <!-Hintergrund-> </div> </div2 id = "div2" <! src = "Images/xiangqingda.png"/> </div> </body> <script> // nach dem Laden abgeschlossen. var oshow = document.getElementsByClassName ('show') [0]; var ospan = document.getElementsByTagName ('span') [0]; var oimg = document.getElementById ('img1'); // ParentNode erhält den übergeordneten Knoten oshow.onmouseover = function () {ospan.style.display = 'block'; oimg.parentnode.style.display = 'block'; }; oshow.onmouseout = function () {ospan.style.display = ''; oimg.parentnode.style.display = ''; }; // Amplifier verschiebt oshow.onmousemove = function (ev) {// Browserkompatibilitätsprobleme var oevent = ev || Ereignis; // Erhalten Sie die Maussposition var x = oevent.offsetx-isopan.offsetwidth/2; var y = oevent.offsety-ispan.offseteight/2; // console.log (oevent.clienty); // console.log (odiv.offsettop); // console.log (ospan.offseteight/2); // console.log (oevent.clienty); if (x <0) {x = 0; } else if (x> oshow.offsetwidth-ispan.offsetwidth) {x = oshow.offsetwidth-ispan.offsetwidth; } if (y <0) {y = 0; } else if (y> oshow.offseteightheighthEgheigy.offseteight) {y = oshow.offseteightheighthEgheightheighthEghtheigheightheightheight; } // Positionieren Sie das ausgewählte Box ospan.style.left = x+'px'; ospan.style.top = y+'px'; // Positionieren Sie den Verstärker var prozentx = x/(oshow.offsetwidth-ospan.offsetwidth); var prozenty = y/(Oshow.Offseteightheightheightheightheightheightheightheight); var oimgParent = oimg.Parentnode; oimg.style.left = -percentX*(oimg.offsetwidth-oimgparent.offsetwidth)+'px'; oimg.Style.top = -percenty*(oimg.offseteightheightheightHEL-oimgParent.offseteight)+'px'; }; }; }; </script> </html>Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.