电商网站放大镜效果
HTML
<div class="box" id="box">
<div class="small">
<img src="img/01.jpg" width="350" alt="" />
<div class="mask"></div>
<ul>
<li class="bd"><img src="img/01.jpg" alt=""></li>
<li><img src="img/02.jpg" alt=""></li>
<li><img src="img/03.jpg" alt=""></li>
<li><img src="img/04.jpg" alt=""></li>
<li><img src="img/05.jfif" alt=""></li>
</ul>
</div>
<div class="big">
<img src="img/01.jpg" alt="" />
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.box {
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.big img {
position: absolute;
width: 800px;
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
display: none;
}
.small {
position: relative;
}
ul li {
list-style: none;
float: left;
width: 50px;
height: 50px;
margin-right: 10px;
box-sizing: border-box;
border: 2px solid #000;
overflow: hidden;
border: 2px solid transparent;
cursor: pointer;
}
ul li img {
width: 50px;
height: 50px;
}
.bd {
border: 2px solid yellow;
}
JS
// 获取元素
var box = document.getElementById("box")
var small = box.children[0]
var mask = small.children[1]
var big = box.children[1]
var big_img = big.children[0]
// console.log(small, mask, big);
var ul = document.getElementsByTagName('ul')[0]
var lis = ul.children
// console.log(lis);
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
for (let i = 0; i < lis.length; i++) {
lis[i].className = ""
}
this.className = 'bd'
// console.log(this.children[0].getAttribute("src"));
s_img.src = this.children[0].getAttribute("src")
big_img.src = this.children[0].getAttribute("src")
}
}
// 鼠标经过small时显示mask框和右边大盒子
small.onmouseover = function () {
mask.style.display = 'block'
big.style.display = 'block'
}
// 鼠标离开时隐藏mask框和右边大盒子
box.onmouseout = function () {
mask.style.display = 'none'
big.style.display = 'none'
}
// 鼠标在box上移动时，跟着动
box.onmousemove = function (e) {
// 盒子距离box边框的距离（即mask的定位属性left和top的值）
maskX = e.pageX - 100 - mask.offsetWidth / 2
maskY = e.pageY - 100 - mask.offsetWidth / 2
// 限制 让mask不能超出small框 左边和上边
maskX = maskX < 0 ? 0 : maskX
maskY = maskY < 0 ? 0 : maskY
// 限制 让mask不能超出small框 右边和下边
maskX = maskX > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : maskX
maskY = maskY > box.offsetHeight - mask.offsetHeight ? box.offsetHeight - mask.offsetHeight :
maskY
// mask跟着鼠标移动移动
mask.style.left = maskX + 'px'
mask.style.top = maskY + 'px'
// 让右侧大盒子的图片按比例移动
big_img.style.left = -maskX * 800 / 350 + 'px'
big_img.style.top = -maskY * 800 / 350 + 'px'
}
效果：
