| 本文实例为大家分享了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();})效果： 
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
JavaScript实现放大镜效果
Vue slot插槽的使用详情 |
