บทความนี้แบ่งปันเอฟเฟกต์การขยายภาพของ 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 {Width: 100%; ความสูง: 100%; ความเป็นมา: สีแดง; ตำแหน่ง: สัมบูรณ์; ซ้าย: 0px; ด้านบน: 0px; z-index: 10px; ความทึบ: 0.1; } #div2 {width: 300px; ความสูง: 300px; ตำแหน่ง: ญาติ; ด้านบน: -300px; ซ้าย: 300px; แสดง: ไม่มี; ล้น: ซ่อน; มาร์จิ้น: 0px auto 0px; } #img1 {ตำแหน่ง: สัมบูรณ์; } </style> </head> <body> <div id = "div1"> <!-รูปภาพ-> <img src = "ภาพ/xiangqing.png"> <!-ช่องทำเครื่องหมายเมาส์-> <span> </span> <! src = "images/xiangqingda.png"/> </div> </body> <prisct> // หลังจากการโหลดเสร็จสิ้น 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 = ฟังก์ชั่น (ev) {// แก้ปัญหาความเข้ากันได้ของเบราว์เซอร์ var oevent = ev || เหตุการณ์; // รับตำแหน่งเมาส์ 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; } อื่นถ้า (x> oshow.offsetWidth-ospan.offsetWidth) {x = oshow.offsetWidth-ospan.offsetWidth; } ถ้า (y <0) {y = 0; } อื่นถ้า (y> oshow.offsetheight-ospan.offsetheight) {y = oshow.offsetheight-ospan.offsetheight; } // วางตำแหน่งกล่องที่เลือก ospan.style.left = x+'px'; ospan.style.top = y+'px'; // วางตำแหน่งแอมพลิฟายเออร์ var prementx = x/(oshow.offsetWidth-ospan.offsetWidth); var penty = 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 มากขึ้น