<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
img {
display: block;
}
* {
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;
overflow: hidden;
display: none;
/* border: solid 2px pink */
}
.big img {
position: absolute;
}
/* .small {
position: relative;
} */
.mask {
width: 100px;
height: 100px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
display: none;
}
</style>
<body>
<div class="box" id="box">
<div class="small" id="small">
<img src="pic/small.jpg" width="350" alt="" />
<div class="mask" id="mask"></div>
</div>
<div class="big" id="big">
<img src="pic/big.jpg" width="800" alt="" id="img" />
</div>
</div>
</body>
<script>
// 1获取节点
let boxObj = document.getElementById('box');
let smallObj = document.getElementById('small');
let maskObj = document.getElementById('mask');
let bigObj = document.getElementById('big');
let bigImg = document.getElementById('img')
// 2鼠标移入smallObj显示mask和bigObj
smallObj.onmouseenter = function () {
maskObj.style.display = 'block';
bigObj.style.display = 'block';
}
// 3 鼠标移出则隐藏
smallObj.onmouseleave = function () {
maskObj.style.display = 'none';
bigObj.style.display = 'none';
}
// 获取box的left和top值
let boxLeft = boxObj.offsetLeft;
let boxTop = boxObj.offsetTop;
// 4.给small绑定鼠标移动事件,让mask移动
smallObj.onmousemove = function (eve) {
// 4-1 获取鼠标实时位置
let mouseX = eve.pageX;
let mouseY = eve.pageY;
// 4-2 计算出mask的位置
let maskPosX = mouseX - boxLeft - maskObj.offsetWidth / 2;
let maskPosY = mouseY - boxTop - maskObj.offsetHeight / 2;
// 4-3 边界的设置
if (maskPosX < 0) maskPosX = 0;
if (maskPosY < 0) maskPosY = 0;
// 右边界和下边界的设置(最大移动距离)
let maskTargetX = smallObj.offsetWidth - maskObj.offsetWidth;
let maskTargetY = smallObj.offsetHeight - maskObj.offsetHeight;
if (maskPosX > maskTargetX) maskPosX = maskTargetX;
if (maskPosY > maskTargetY) maskPosY = maskTargetY;
// 4-4设置小黄块的位置
maskObj.style.left = maskPosX + 'px';
maskObj.style.top = maskPosY + 'px';
// 4-5 设置大图的位置 跟随小黄块移动
//黄色盒子覆盖到哪里,对应的大盒子里图片展示哪里
//mask移动距离 / mask移动的最大距离 == img移动距离 /img移动的最大距离
// 由此可得:
//img移动距离 = mask移动距离 / mask移动的最大距离 * img移动的最大距离
// 4-5-1计算大图移动的最大边界值
let imgTargetX = bigImg.offsetWidth - bigObj.offsetWidth;
let imgTargetY = bigImg.offsetHeight - bigObj.offsetHeight;
// 计算大图根据鼠标移动的位置
let imgPosX = maskPosX / maskTargetX * imgTargetX;
let imgPosY = maskPosY / maskTargetY * imgTargetY;
//大图移动方向和小黄块方向相反 所以给负值
bigImg.style.left = -imgPosX + 'px';
bigImg.style.top = -imgPosY + 'px';
}
</script>
</html>
Js原生放大镜效果
最新推荐文章于 2024-09-22 23:26:43 发布