كل شخص تقريبًا لديه خبرة في التسوق عبر الإنترنت. تحتوي بعض مواقع الويب على وظيفة زجاجية مكبرة المنتج. عندما تنقل الماوس إلى الصورة ، ستكون هناك صورة كبيرة أخرى بجانبها ، والتي تعادل تأثير الزجاج المكبرة. كيف يمكن تحقيق مثل هذا التأثير؟ سأرسل لك الرمز ، يرجى الرجوع إليه.
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> مكبر الزجاج </title> <style>*{marging: 0 ؛ padding: 0 ؛} #warp {width: 1184px ؛ leight: 500px ؛ margin: 50px auto ؛ 10px ؛ الموضع: النسبية ؛}#warp #minbox {width: 350px ؛ الارتفاع: 350px ؛ عطف: اليسار ؛ الموضع: relative ؛}#maxbox {width: 400px ؛ الارتفاع: 400px ؛ الموضع: absolut 800px ؛ الموضع: مطلق ؛}#con {float: left ؛ margin-left: 20px ؛}#meng {width: 175px ؛ leight: 175px ؛ الموضع: المطلق ؛ خلفية اللون: أصفر ؛ عتامة: 0.4 ؛ مرشح: alpha (عدوى = 40) id = "warp"> <div id = "minbox"> <img src = "images/min.jpg"> <p id = "meng"> </p> </viv> <div id = "maxbox"> <img src = "images/max.jpg"> </div id = minbox = document.getElementById ('minbox') ؛ var meng = document.getElementById ('meng') ؛ var maxbox = document.getElementById ('maxbox') ؛ var maximg = maxbox.getelementsbytagname ('img') [0] var minimg = minbox.getelementsyby ('img') OFL = 0 ، OFT = 0 ؛ بينما (OBJ) {ofl+= obj.offsetleft+obj.clientleft ؛ oft+= obj.offsettop+obj.clienttop ؛ obj = obj.offsetParent ؛} return {left: ofl ، top: oft} ؛ e = e || window.event ؛ meng.style.display = 'block' ؛ maxbox.style.display = 'block' ؛ var niubi1 = Niubi2 = {niubi1 = minbox.clientwidth-meng.clientwidth ؛} if (niubi2 <= 0) {niubi2 = 0 ؛} آخر إذا (niubi2> = minbox.clientheight-meng.clientheight) {niubi2 = minbox.clientheight-meng.clientheight ؛} console.log (niubi1) ؛ console.log (niubi2) ؛ meng.style.left = niubi1+'px' ؛ meng.style.top = niubi2+'px' ؛ e.left)*bili+'px' ؛ maximg.style.top = -parseint (meng.style.top)*bili+'px' ؛} minbox.onmouseout = function () {meng.style.display = 'none' ؛ maxbox.style.display = 'ما ورد أعلاه هو تأثير الكأس المكبرة لموقع التسوق على موقع JavaScript الذي تم تقديمه إليك. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!