这篇文章主要为大家展示了“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如何实现仿淘宝放大镜效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
