购物软件普遍自带的商品放大镜可以让卖家浏览商品细节,当使用者的鼠标移动时,放大镜也随之移动,想要自己实现如下。
具体效果及代码如下:
京东
苏宁
代码如下:
样式部分
//display:none使“放大镜框”和放大图在卖家想查看之前隐藏
body {
margin: 0;
}
.bigbox {
/* background-color: rgb(233, 44, 44); */
width: 1300px;
height: 900px;
position: relative;
}
.box1 {
background-color: gray;
width: 398px;
height: 398px;
position: absolute;
left: 110px;
top: 175px;
border: solid 1px black;
}
.box2 {
background-color: rgb(247, 211, 0.5, 0.5);
width: 250px;
height: 250px;
position: absolute;
left: 0px;
top: 0px;
display: none;
}
.box3 {
background-color: red;
width: 550px;
height: 550px;
position: absolute;
left: 530px;
top: 100px;
overflow: hidden;
border: solid 1px black;
display: none;
}
.box3 img {
position: absolute;
left: 0;
top: 0;
}
主体部分
bigbox:这个区域的背景
box1:缩略图
box2:“放大镜的框”
box3:放大后的图
img1:小图
img2:大图
<div class="bigbox">
<div class="box1">
<img src="./images/1.png" class="img1">
<div class="box2"></div>
</div>
<div class="box3">
<img src="./images/2.jpg" class="img2">
</div>
</div>
JS部分
<script>
var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');
var box3 = document.querySelector('.box3');
var img2 = document.querySelector('.img2');
box1.onmouseenter = function () {
box2.style.display = 'block';
box3.style.display = 'block';
}
box1.onmouseleave = function () {
box2.style.display = 'none';
box3.style.display = 'none';
}
box1.onmousemove = function () {
var x = event.clientX - box1.offsetLeft;
var y = event.clientY - box1.offsetTop;
var box2X = x - box2.offsetWidth / 2
var box2Y = y - box2.offsetHeight / 2
if (box2X < 0) {
box2X = 0;
} else if (box2X > box1.offsetWidth - box2.offsetWidth) {
box2X = box1.offsetWidth - box2.offsetWidth
}
if (box2Y < 0) {
box2Y = 0;
}
else if (box2Y > box1.offsetHeight - box2.offsetHeight) {
box2Y = box1.offsetHeight - box2.offsetHeight
}
box2.style.left = box2X + 'px';
box2.style.top = box2Y + 'px';
var b = (img2.offsetHeight - box3.offsetHeight) / (box1.offsetHeight - box2.offsetHeight)
img2.style.left = -box2X * b + "px"
img2.style.top = -box2Y * b + "px"
}
</script>
<script>
//获取所需节点
var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');
var box3 = document.querySelector('.box3');
var img2 = document.querySelector('.img2');
//为右侧缩略图添加鼠标移入事件
box1.onmouseenter = function () {
//跟随鼠标在缩略图中移动的”放大镜框“,放大后的细节图
//二者在鼠标移入缩略图后显现
box2.style.display = 'block';
box3.style.display = 'block';
}
//为缩略图添加鼠标移出事件
//移出缩略图后消失
box1.onmouseleave = function () {
box2.style.display = 'none';
box3.style.display = 'none';
}
//为缩略图添加鼠标移动事件
box1.onmousemove = function () {
//鼠标在显示窗口中的坐标-缩略图在显示窗口中的坐标=鼠标在缩略图中的坐标
var x = event.clientX - box1.offsetLeft;
var y = event.clientY - box1.offsetTop;
//使“放大镜框”跟随鼠标(将鼠标在缩略图中的坐标赋给“放大镜框”中心的坐标)
var box2X = x - box2.offsetWidth / 2
var box2Y = y - box2.offsetHeight / 2
//使“放大镜框”无法超出缩略图范围,并且当鼠标的X或Y坐标超出“放大镜框”中心能与鼠标重合的范围时,“放大镜框”中心的Y或X坐标依旧跟着鼠标移动的方向增加或减少
box2X = 0;
} else if (box2X > box1.offsetWidth - box2.offsetWidth) {
box2X = box1.offsetWidth - box2.offsetWidth
}
if (box2Y < 0) {
box2Y = 0;
}
else if (box2Y > box1.offsetHeight - box2.offsetHeight) {
box2Y = box1.offsetHeight - box2.offsetHeight
}
//为“放大镜框”坐标赋值
box2.style.left = box2X + 'px';
box2.style.top = box2Y + 'px';
//(大图和小图都是正方形)大图高度-放大图框高度得到大图可移动范围的高,缩略图高度-放大镜框高度得到缩略图可移动范围的高,二者相除得到比例b
var b = (img2.offsetHeight - box3.offsetHeight) / (box1.offsetHeight - box2.offsetHeight)
//前者的坐标乘比例后的值赋给大图,即可让大图显示的位置与缩略图(小图)相同
img2.style.left = -box2X * b + "px"
img2.style.top = -box2Y * b + "px"
}
</script>
实现效果