前言:在电商平台我们经常能看到这样的放大镜效果,如何用原生的JS代码来实现这样的功能呢?
鼠标
1.思路分析:三事两线
三个事件:
- 鼠标移入:显示出大图片和黄色遮罩
- 鼠标移动:盒子跟随鼠标移动，且鼠标在盒子的中心位置,同时大图片按比例移动
- 鼠标移出:隐藏大图片和遮罩层
两线:
- e.pageX,e.pageY:pageX/Y坐标系相对于页面左上角，实际上就是界面滚动出去的距离 + 可视区域的距离.(IE8以及之前版本不支持)
- offsetLeft,offsetTop:获取元素的外边框到定位父级的内边框的（左/上）距离
2.书写顺序
1.获取元素
2.注册事件
3.事件处理
因为写的注释在代码中比较暗,每个部分挑出来,如果理解可以直接跳到最后看总代码,图片也放在最后方便学习.
HTML,CSS部分:结构比较简单
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
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;
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
.small {
position: relative;
}
.box img {
vertical-align: top;
}
#bigBox>img {
/*是让里面的图片脱标，为的就是让里面的图片进行一个移动*/
position: absolute;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="small" id="smallBox">
<img src="./01.jpg" width="350" alt="" />
<div class="mask" id="mask"></div>
</div>
<div class="big" id="bigBox">
<img id="bigImg" src="./001.jpg" width="800" alt="" />
</div>
</div>
</body>
</html>
重点部分
1.获取元素
//1.获取元素:都是通过ID获取
let smallBox = document.getElementById('smallBox');//小盒子
let mask = document.getElementById('mask');//遮罩
let bigBox = document.getElementById('bigBox');//大盒子
let bigImg = document.getElementById('bigImg');//大图片
let box = document.getElementById('box'); //最外面box box的offsetLeft才是到body的距离.
2.事件注册和事件处理
- 鼠标移入
smallBox.onmouseover = ()=> {
//3.事件处理:显示big大图片盒子和mask遮罩盒子
bigBox.style.display = 'block';
mask.style.display = 'block';
};
- 鼠标移出
smallBox.onmouseout = ()=> {
//3.事件处理:隐藏big大图片盒子和mask遮罩盒子
bigBox.style.display = 'none';
mask.style.display = 'none';
};
-
鼠标移动
1.遮罩跟随鼠标移动,且鼠标在遮罩中心,e=e || window.event 兼容性代码
smallBox.onmousemove = (e)=> {
e = e || window.event;
//3.事件处理:
//a.遮罩mask跟随鼠标移动
//蓝线 = 红线（e.apgeX） - 绿线（box.offsetLeft）
let x = e.pageX - box.offsetLeft;
let y = e.pageY - box.offsetTop;
//b.鼠标在mask中心位置
x -= mask.offsetWidth / 2;
y -= mask.offsetHeight / 2;
//这个距离是数值,所以要做字符串的拼接
mask.style.left = x + 'px';
mask.style.top = y + 'px';
}
2.大图片按比例移动:
//d.bigImg相应移动
bigImg.style.left = -x * bigBox.offsetWidth / mask.offsetWidth + 'px';
bigImg.style.top = -y * bigBox.offsetHeight / mask.offsetHeight + 'px';
3.边界检测,超出距离遮罩不再移动
距离计算: 0 < x < smallbox宽度350 - mask宽度175 = 175,Y同理
当x小于0时,x=0,防止遮罩移出盒子
x = x < 0 ? 0 : x;
x = x > 175 ? 175 : x;
y = y < 0 ? 0 : y;
y = y > 175 ? 175 : y;
总代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
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;
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
.small {
position: relative;
}
.box img {
vertical-align: top;
}
#bigBox>img {
/*是让里面的图片脱标，为的就是让里面的图片进行一个移动*/
position: absolute;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="small" id="smallBox">
<img src="./01.jpg" width="350" alt="" />
<div class="mask" id="mask"></div>
</div>
<div class="big" id="bigBox">
<img id="bigImg" src="./001.jpg" width="800" alt="" />
</div>
</div>
<script>
//1.获取元素
let smallBox = document.getElementById('smallBox'); //小盒子
let mask = document.getElementById('mask'); //遮罩
let bigBox = document.getElementById('bigBox'); //大盒子
let bigImg = document.getElementById('bigImg'); //大图片
let box = document.getElementById('box'); //最外面box box的offsetLeft才是到body的距离
//2.注册事件
//2.1 鼠标移入
smallBox.onmouseover = function () {
//3.事件处理:显示big大图片盒子和mask遮罩盒子
bigBox.style.display = 'block';
mask.style.display = 'block';
};
//2.2 鼠标移出
smallBox.onmouseout = function () {
//3.事件处理:隐藏big大图片盒子和mask遮罩盒子
bigBox.style.display = 'none';
mask.style.display = 'none';
};
//2.3 鼠标移动
smallBox.onmousemove = function (e) {
e = e || window.event;
//3.事件处理:
//a.遮罩mask跟随鼠标移动
let x = e.pageX - box.offsetLeft;
let y = e.pageY - box.offsetTop;
//b.鼠标在mask中心位置
x -= mask.offsetWidth / 2;
y -= mask.offsetHeight / 2;
//边界检测
x = x < 0 ? 0 : x;
x = x > 175 ? 175 : x;
y = y < 0 ? 0 : y;
y = y > 175 ? 175 : y;
mask.style.left = x + 'px';
mask.style.top = y + 'px';
//d.bigImg相应移动
bigImg.style.left = -x * bigBox.offsetWidth / mask.offsetWidth + 'px';
bigImg.style.top = -y * bigBox.offsetHeight / mask.offsetHeight + 'px';
};
</script>
</body>
</html>
图片自取
001.jpg
01.jpg
