仿京东放大镜
html:
<div class="content">
<div class="preview_img">
<img src="https://img0.baidu.com/it/u=3311900507,1448170316&fm=26&fmt=auto&gp=0.jpg" alt="" />
<div class="cub"></div>
</div>
<div class="big">
<img src="https://img0.baidu.com/it/u=3311900507,1448170316&fm=26&fmt=auto&gp=0.jpg" alt="" />
</div>
</div>
CSS :
.content {
width: 400px;
height: 400px;
cursor: move;
}
.preview_img{
position: relative;
height: 400px;
}
img {
width: 100%;
}
.cub {
width: 100px;
height: 100px;
background-color: rgb(190, 218, 70, 0.75);
position: absolute;
top: 0;
left: 0;
display: none;
pointer-events: none;
}
.big {
width: 300px;
height: 300px;
margin: 10px;
font-size: 0;
display: none;
overflow: hidden;
position: absolute;
top: 0;
left: 410px;
}
.big img {
width: 500px;
height: 500px;
position: absolute;
top: 0;
left: 0;
}
JS:
var content = document.querySelector('.content');
var img = document.querySelector('.content img');
var cub = document.querySelector('.cub');
var big_pic = document.querySelector('.big img');
var big = document.querySelector('.big');
var preview_img=document.querySelector('.content .preview_img');
img.onmouseenter = function () {
cub.style.display = "block";
big.style.display = "block";
// console.log('鼠标移入');
}
img.onmouseleave = function () {
cub.style.display = "none";
big.style.display = "none";
// console.log('鼠标移除');
}
preview_img.onmousemove = function (e) {
//获取鼠标相对与图片的坐标
var offsetX = e.pageX - preview_img.offsetLeft;
var offsetY = e.pageY - preview_img.offsetTop;
//实时计算黄色快相对于图片的横向和纵向坐标
var left = offsetX - cub.offsetWidth / 2;
var top = offsetY - cub.offsetHeight / 2;
//遮罩层最大移动距离
var maskMax = preview_img.offsetWidth - cub.offsetWidth;
left = left <= 0 ? 0 : (left >= this.offsetWidth - 100 ? (this.offsetWidth - 100) : left);
top = top <= 0 ? 0 : (top >= this.offsetHeight - 100 ? (this.offsetHeight - 100) : top);
cub.style.left = left + "px";
cub.style.top = top + "px";
//大图片最大移动位置
var bigMax = big_pic.offsetWidth - big.offsetWidth;
//大图片移动距离=遮罩层移动距离*大图片最大移动距离/遮罩层最大移动距离
var bigimgX = left * bigMax / maskMax;
var bigimgY = top * bigMax / maskMax;
big_pic.style.left = -bigimgX + "px";
big_pic.style.top = -bigimgY + "px";
}