Artikel ini membagikan efek pembesaran gambar JS untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <itement> </title> <style type = "text/css"> #div1 {width: 300px; Tinggi: 300px; Posisi: kerabat; margin: 30px auto 0px; } #Div1 img {width: 300px; } #div1 span {width: 150px; Tinggi: 150px; Latar Belakang: Merah; Posisi: Absolute; Kiri: 0px; Atas: 0px; Tampilan: Tidak Ada; Opacity: 0.2; } .show {width: 100%; Tinggi: 100%; Latar Belakang: Merah; Posisi: Absolute; Kiri: 0px; Atas: 0px; z-index: 10px; Opacity: 0.1; } #Div2 {width: 300px; Tinggi: 300px; Posisi: kerabat; Atas: -300px; Kiri: 300px; Tampilan: Tidak Ada; meluap: tersembunyi; margin: 0px auto 0px; } #img1 {position: absolute; } </tyle> </head> <body> <Div id = "Div1"> <!-picture-> <img src = "gambar/xiangqing.png"> <!-kotak centang mouse-> <span> </span> <!-latar belakang-> <v> </div> </div> <div id = "div2"> <! src = "gambar/xiangqingda.png"/> </div> </body> <script> // Setelah memuat selesai, 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 mendapatkan node induk oshow.onmouseover = function () {ospan.style.display = 'block'; oimg.parentnode.style.display = 'block'; }; oshow.onmouseout = function () {ospan.style.display = ''; oimg.parentnode.style.display = ''; }; // Amplifier memindahkan oshow.onmouseMove = function (ev) {// memecahkan masalah kompatibilitas browser var oevent = ev || event; // Dapatkan posisi 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-ospan.offsetheight) {y = oshow.offsetheight-ospan.offsetheight; } // Posisikan kotak yang dipilih ospan.style.left = x+'px'; ospan.style.top = y+'px'; // Posisikan amplifier var persen = x/(oshow.offsetwidth -pan.offsetWidth); var persen = 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>Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.