一 功能分析
- 鼠标经过展示窗口,则显示放大后的图片和遮挡层(遮挡层覆盖范围则表示要放大的区域)
- 鼠标移出则隐藏放大窗口和遮挡层
- 鼠标在展示窗口移动时, 遮挡层和放大后的图片随之移动,且鼠标位置为遮挡层的中心
- 遮挡层不能超出展示窗口的范围
二 添加元素
<!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>Document</title>
</head>
<body>
<!-- 展示窗口 -->
<div id="box">
<img src="../imgs/practice3.jpg" alt="">
<!-- 遮挡层 -->
<div class="mask"></div>
<!-- 放大窗口 -->
<div class="slave"><img src="../imgs/practice3.jpg" alt="" class="bigimg"></div>
</div>
</body>
三 样式调整
<style>
#box{
margin: 100px 0 0 100px;
position: relative;
border: 1px dashed red;
width: 450px;
height: 450px;
border: 1px dashed red;
cursor: move;
/* z-index: 2; */
}
#box>.mask {
width: 200px;
height: 200px;
opacity: 50%;
background-color: yellow;
position: absolute;
top: 0;
left: 0;
display: none;
cursor: move;
border: 1px solid #ccc;
}
#box>.slave{
width: 500px;
height: 500px;
position: absolute;
top: 0px;
left: 470px;
border: 1px dashed red;
z-index: 999;
display: none;
overflow: hidden;
}
#box>.slave>img{
position: absolute;
top: 0;
left: 0;
width: 1125px;
height: 1125px;
}
</style>
显示如下效果:
三 代码编写
<script>
// 注意父元素与主元素的层级关系
window.addEventListener("load", function(){
var box = document.querySelector("#box");
var mask = document.querySelector(".mask");
var slave = document.querySelector(".slave");
var big_img = document.querySelector(".bigimg")
// 当鼠标经过box时，遮挡层和放大窗口显示
box.addEventListener('mouseover',function(){
mask.style.display = "block";
slave.style.display = "block";
});
// 当鼠标离开box时，遮挡层和放大窗口隐藏
box.addEventListener('mouseleave',function(){
mask.style.display = "none";
slave.style.display = "none";
});
box.addEventListener("mousemove",function(e){
// 获取鼠标在盒子中的坐标
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// 要想让鼠标在遮挡层的中心显示,那么遮挡层的水平偏移量left和垂直偏移量top分别要减去自身宽度和高度的二分之一
var maskx = x - mask.offsetWidth/2;
var masky = y - mask.offsetHeight/2;
// 让mask跟随鼠标移动
if (x <= mask.offsetWidth/2) {
// 如果鼠标在盒子中的x坐标小于遮挡层宽度的1/2, 设置遮挡层的水平偏移量最小值为0
maskx = 0;
}
if (y <= mask.offsetHeight/2) {
// 如果鼠标在盒子中的y坐标小于遮挡层高度的1/2, 设置遮挡层的垂直偏移量最小值为0
masky = 0;
}
if (x >= (this.offsetWidth-mask.offsetWidth/2)) {
// 如果鼠标在盒子中的x坐标 >= 盒子宽度 - 遮挡层宽度/2, 设置水平偏移量的最大值
maskx = this.offsetWidth - mask.offsetWidth;
}
if (y >= (this.offsetHeight-mask.offsetHeight/2)) {
// 如果鼠标在盒子中的y坐标 >= 盒子高度 - 遮挡层高度/2, 设置垂直偏移量的最大值
masky = this.offsetHeight - mask.offsetHeight;
}
mask.style.left = maskx + 'px';
mask.style.top = masky + 'px';
// 大图移动位置 = 小图移动的位置 * 大图最大移动距离 / 小图最大移动距离
var bigx = maskx * (big_img.offsetWidth - slave.offsetWidth)/(this.offsetWidth-mask.offsetWidth);
var bigy = masky * (big_img.offsetHeight - slave.offsetHeight)/(this.offsetHeight-mask.offsetHeight);
big_img.style.left = -bigx + "px";
big_img.style.top = -bigy + "px";
})
})
</script>
四 效果展示
浙公网安备 33010602011771号