类淘宝的放大镜效果

Posted 2020-08-16

这里是一个在PC端电商页面经常用到的一种功能，它可以使消费者在查看页面的商品时看的更加清晰。也就是俗称的放大镜

这里需要用到一些知识，鼠标事件（mousemove，mouseenter，mouseleave），定位等事件。

这里的html布局是在页面上有一个div，内部放一张图片，和一个小滑块（小div），另一个位置放另一个div，内部放一张和上面相同的图片，这个图片要求是比上一张大。

<div class="small">
<img src="15/img/big.jpg"/>
<div class="slider">

</div>
</div>

<div class="big">
<img src="15/img/big.jpg"/>
</div>

在css方面，这些div和图片的位置都是定位的。

有一些刚开始是隐藏的，当触发一些鼠标事件的时候，才显示

*{margin: 0;padding: 0;}
.small{width: 500px;height: 500px;position: absolute;left: 100px;}
.small>img{width: 100%;}
.big{width: 500px;height: 500px;position: absolute;left: 600px;top: 100px;overflow: hidden;display: none;}

.small>img{width: 500px;height: 500px;}
.slider{width: 50px;height: 50px;position: absolute;background-color: rgba(255,0,0,0.3);display: none;}

有关JQuery，更多的是一些关于位置的问题

这里我百度了一下关于位置的方法

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。

clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。

offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。

offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。

screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。

screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。

$(‘.small‘).mousemove(function (event) {
var x = event.clientX -$(‘.small‘).offset().left - $(‘.slider‘).width()/2;
var y = event.clientY - $(‘.small‘).offset().top - $(‘.slider‘).height()/2;
var minX = 0;

var maxX = $(".small").width()-$(".slider").width();
var minY = 0;

var maxY = $(".small").height()-$(".slider").height();
if (minX>x) {
x=minX;
};
if (maxX<x) {
x = maxX;
};
if (minY>y) {
y=minY;
};
if (maxY<y) {
y = maxY;
};

$(".slider").css({
left:x,
top:y
});

var bigX = -x/maxX*($(".big>img").width()-$(".big").innerWidth())+"px"
var bigY = -y/maxY*($(".big>img").height()-$(".big").innerHeight())+"px"
$(".big img").css({
position: "absolute",
left: bigX,
top: bigY
})
})
$(".small").mouseenter(function () {
$(".big").css("display","block");
$(".slider").css("display","block");
})
$(".small").mouseleave(function () {
$(".big").css("display","none");
$(".slider").css("display","none");
})

这个是关于JQuery的代码。