如何用JavaScript实现类似淘宝的放大镜效果？

本文共计446个文字，预计阅读时间需要2分钟。

原文示例：本文实例为大家分享了JavaScript实现淘宝放大镜效果的完整代码，供大家参考，具体内容如下+代码+div class=thumbnail+img src=.\/img\/12-1Z930152149+(2).jpg alt=+div class=magnifier/div+/div+div+class

改写后：本文展示了如何用JavaScript制作淘宝风格的放大镜效果，代码如下+HTML代码+div class=thumbnail+img src=.\/img\/12-1Z930152149+(2).jpg alt=+div class=magnifier/div+/div+div

本文实例为大家分享了JavaScript实现淘宝放大镜效果的具体代码，供大家参考，具体内容如下

html代码

<div class="thumbnail"> <img src="./img/12-1Z930152149 (2).jpg" alt=""> <div class="magnifier"></div> </div> <div class="original"> <img src="./img/12-1Z930152149 (2).jpg" alt=""> </div> <script src="./index.js"></script>

css代码

*{ margin: 0; padding: 0; } .thumbnail , .original{ width: 400px; height: 400px; border: 1px solid red; position: absolute; } .original{ left: 450px; overflow: hidden; display: none; } .thumbnail>img{ width: 400px; } .original>img{ width: 800px; position: absolute; } .magnifier{ cursor: move; width: 200px; height: 200px; background-color:rgba(206, 198, 198, 0.5); position: absolute; top: 0; left: 0; display: none; }

js代码

// thumbnail 缩略图 // original 原图 // magnifier 放大镜 $(".thumbnail").mouseover(function(){ $(".magnifier").show() $(".original").show() }) $(".thumbnail").mousemove(function(ev){ // console.log(ev) // 鼠标相对页面 x y 坐标 var mx= ev.pageX; var my =ev.pageY; var tx = mx - $(".thumbnail").offset().left var ty = my - $(".thumbnail").offset().top var l = tx -$(".magnifier").width()/2; var t = ty -$(".magnifier").height()/2; var maxX= $(".thumbnail").width() - $(".magnifier").width(); var maxY= $(".thumbnail").height() -$(".magnifier").height() // 处理边界 if( l >maxX){ l = maxX } if( t >maxY){ t = maxY } if(l <0){ l =0 } if(t<0){ t=0 } //放大镜位置 $(".magnifier").css({ left: l +"px", top : t + "px" }) //原图位置 $(".original >img").css({ left:-l*2 +"px", top:-t*2 +"px" }) }) // 鼠标离开 隐藏 放大镜 ，原图 $(".thumbnail").mouseout(function(){ $(".magnifier").hide(); $(".original").hide(); })

效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。