DOM之放大镜
放大镜逻辑
仅供参考 还未完善
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>放大镜</title>
</head>
<body>
<div class="preview_img">
<img src="s3.png" alt="">
<div class="mask"></div>
<div class="big">
<img src="big.jpg" alt="" class="bigImg">
</div>
</div>
<script>
window.addEventListener('load', function() {
var preview_img = document.querySelector('.preview_img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
preview_img.addEventListener('mouseover', fn1); //添加鼠标再图片上
function fn1(e) {
mask.style.display = big.style.display = 'block'; //再图片上将预准备的两个盒子展示
};
preview_img.addEventListener('mouseout', fn2); //鼠标离开将临时的盒子隐藏
function fn2(e) {
big.style.display = mask.style.display = 'none';
};
preview_img.addEventListener('mousemove', fn3); //添加鼠标再图片上移动的监听事件
function fn3(e) {
var x = e.pageX - this.offsetLeft; // 获取鼠标再盒子里的坐标
var y = e.pageY - this.offsetTop;
var maskX = x - mask.offsetWidth/2; //为鼠标移动设置到半透明盒子的中心做准备
var maskY = y - mask.offsetHeight/2;
var pX=preview_img.offsetWidth-mask.offsetWidth; //获得半透明的盒子最大移动的距离
var pY=preview_img.offsetHeight-mask.offsetHeight;
maskX <= 0 ? maskX = 0 : (maskX >= pX ? maskX = pX : maskX); //判断鼠标的坐标，防止半透明的盒子跑出边界
maskY <= 0 ? maskY = 0 : (maskY >= pY ? maskY = pY : maskY);
mask.style.left = maskX + 'px'; //设置半透明盒子位置
mask.style.top = maskY + 'px';
//右边的放大图的设置
var bigImg=document.querySelector('.bigImg'); //获取图片
var bigMax=bigImg.offsetWidth-big.offsetWidth; //获取这张图片最大的移动距离，用图片的宽度减盒子的宽度
//因为图片的宽度比盒子的宽度大，盒子设置了溢出隐藏，等会按照比例来移动就可以实现它们所对应的放大效果
var bigX=maskX*bigMax/pX; //获取比例，大盒子/小盒子的与大图片/小图片的比例相等，所以可以获得大图片所要移动的距离
var bigY=maskY*bigMax/pY;
bigImg.style.left=-bigX+'px'; //设置大图片移动的距离
bigImg.style.top=-bigY+'px';
//不写下面这个判断会有一个bug，就是如果鼠标移动的太快，瞬间冲小盒子里移动到大盒子里，
//根据mouseout事件会隐藏掉这两个盒子，但是不会，我也不知道为什么，然后加一个这样的判断，就可以解决了
if(x>(this.offsetLeft+this.offsetWidth)){
big.style.display = mask.style.display = 'none';
};
};
});
</script>
</body>
</html>
