JavaScript如何实现仿淘宝放大镜效果

这篇文章主要为大家展示了“JavaScript如何实现仿淘宝放大镜效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“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();})

效果：

以上是“JavaScript如何实现仿淘宝放大镜效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！