目录
1、首先搭建HTML结构：
2、获取元素
3、鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子
4、获取鼠标子盒子内坐标
5、此时鼠标位于黄色遮罩层的左上角，应该改为中央
6、遮罩层不能超出图片位置
7、移动黄色遮挡层，大图片跟随移动
案例分析
整个案例可以分为三个功能模块
1、 鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子功
2、黄色的遮挡层跟随鼠标功能。
3、移动黄色遮挡层，大图片跟随移动功能。
① 黄色的遮挡层跟随鼠标功能。② 把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。③ 首先是获得鼠标在盒子的坐标。④ 之后把数值给遮挡层做为left 和top值。⑤ 此时用到鼠标移动事件，但是还是在小图片盒子内移动。⑥ 发现，遮挡层位置不对，需要再减去盒子自身高度和宽度的一半。⑦ 遮挡层不能超出小图片盒子范围。⑧ 如果小于零，就把坐标设置为0⑨ 如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离⑩ 遮挡层的最大移动距离： 小图片盒子宽度 减去 遮挡层盒子宽度
1、首先搭建HTML结构：
【 一个大的div 包含 一张图片 一个遮罩层mask，和一个大盒子big，该大盒子big里存放一张大图。】
<div class="img">
<img src="./素材/im.jpg" alt="" class="img1">
<div class="mask"></div>
<div class="big">
<img src="./素材/im.jpg" alt="" class="bigImg">
</div>
</div>2、获取元素
var img = document.querySelector('.img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
var img1 = document.querySelector('.img1')
3、鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子
//1、鼠标经过，显示mask和big
img.addEventListener('mouseover', function () {
mask.style.display = 'block';
big.style.display = 'block';
})
//2、鼠标离开
img.addEventListener('mouseout', function () {
mask.style.display = 'none';
big.style.display = 'none';
})4、获取鼠标子盒子内坐标
//获得鼠标在盒子内坐标
img.addEventListener('mousemove', function (e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
}5、此时鼠标位于黄色遮罩层的左上角，应该改为中央
//让鼠标在黄色盒子最中央而不是左上角
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;6、遮罩层不能超出图片位置
//遮罩层不能小于小盒子范围 坐标小于0，停在0 位置
var maskMax = img1.offsetWidth - mask.offsetWidth
if (maskX <= 0) {
maskX = 0
}
else if (maskX >= maskMax) {
maskX = maskMax;
}
if (maskY <= 0) {
maskY = 0
}
else if (maskY >= maskMax) {
maskY = maskMax;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';7、移动黄色遮挡层，大图片跟随移动
//大图片最大移动距离=遮挡层移动距离* 大图片最大移动距离 / 遮挡层最大移动距离
var bigImg = document.querySelector('.bigImg') //大图
var bigMax = bigImg.offsetWidth - big.offsetWidth // 大图最大移动距离
var bigX = maskX * bigMax / maskMax; //大图移动距离
var bigY = maskY * bigMax / maskMax;
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';
完整代码
<style>
* {
margin: 0;
padding: 0;
}
.img {
position: relative;
}
.img1 {
width: 400px;
height: 400px;
border: 1px solid #ccc;
}
.mask {
display: none;
position: absolute;
width: 300px;
height: 300px;
background-color: yellow;
top: 0;
left: 0;
opacity: 0.3;
border: 1px solid #ccc;
cursor: move;
}
.big {
overflow: hidden;
display: none;
position: absolute;
width: 500px;
height: 500px;
top: 0;
left: 410px;
border: 1px solid #ccc;
/* z-index: 999; */
}
.bigImg {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<div class="img">
<img src="./素材/im.jpg" alt="" class="img1">
<div class="mask"></div>
<div class="big">
<img src="./素材/im.jpg" alt="" class="bigImg">
</div>
</div>
<script>
window.addEventListener('load', function () {
var img = document.querySelector('.img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
var img1 = document.querySelector('.img1')
//1、鼠标经过，显示mask和big
img.addEventListener('mouseover', function () {
mask.style.display = 'block';
big.style.display = 'block';
})
//2、鼠标离开
img.addEventListener('mouseout', function () {
mask.style.display = 'none';
big.style.display = 'none';
})
//3、获得鼠标在盒子内坐标
img.addEventListener('mousemove', function (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;
//4、遮罩层不能小于小盒子范围 坐标小于0，停在0 位置
var maskMax = img1.offsetWidth - mask.offsetWidth
if (maskX <= 0) {
maskX = 0
}
else if (maskX >= maskMax) {
maskX = maskMax;
}
if (maskY <= 0) {
maskY = 0
}
else if (maskY >= maskMax) {
maskY = maskMax;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
//5、大图片最大移动距离=遮挡层移动距离* 大图片最大移动距离 / 遮挡层最大移动距离
var bigImg = document.querySelector('.bigImg') //大图
var bigMax = bigImg.offsetWidth - big.offsetWidth // 大图最大移动距离
var bigX = maskX * bigMax / maskMax; //大图移动距离
var bigY = maskY * bigMax / maskMax;
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';
})
})
</script>效果如图：
