تشارك هذه المقالة تأثير تكبير الصورة لـ JS للرجوع إليه. المحتوى المحدد كما يلي
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> </title> <style type = "text/css"> #div1 {width: 300px ؛ الارتفاع: 300 بكسل ؛ الموقف: قريب الهامش: 30px Auto 0px ؛ } #div1 img {width: 300px ؛ } #div1 span {width: 150px ؛ الارتفاع: 150 بكسل ؛ الخلفية: أحمر. الموقف: مطلق ؛ اليسار: 0px ؛ أعلى: 0px ؛ العرض: لا شيء ؛ العتامة: 0.2 ؛ }. Show {Width: 100 ٪ ؛ الارتفاع: 100 ٪ الخلفية: أحمر. الموقف: مطلق ؛ اليسار: 0px ؛ أعلى: 0px ؛ Z-index: 10px ؛ العتامة: 0.1 ؛ } #div2 {width: 300px ؛ الارتفاع: 300 بكسل ؛ الموقف: قريب أعلى: -300px ؛ اليسار: 300 بكسل ؛ العرض: لا شيء ؛ الفائض: مخفي. الهامش: 0px Auto 0px ؛ } #img1 {الموضع: absolute ؛ } </style> </head> <body> <div id = "div1"> <!-picture-> <img src = "images/xiangqing.png"> <!-الماوس مربع الاختيار-> <span> </span> <!-الخلفية-> <div> </viv> <div> div = "div2" src = "Images/XiangQingda.png"/> </viv> </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 () {espan.style.display = 'block' ؛ oimg.parentnode.style.display = 'block' ؛ } ؛ Oshow.onmouseout = function () {espan.style.display = '' ؛ oimg.parentnode.style.display = '' ؛ } ؛ // Amplifier Moving Oshow.onmousemove = function (ev) {// solve prowser compatibility compatibility 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 ؛ } آخر إذا (x> oshow.offsetwidth-ospan.offsetwidth) {x = oshow.offsetwidth-ospan.offsetwidth ؛ } if (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 prexx = x/(Oshow.offsetWidth-ospan.offsetWidth) ؛ var ٪ = 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 أكثر.