<body>
<style>
.box {
width: 200px;
height: 125px;
background-image: url("./image/img-41.jpg");
background-size: 100%;
background-repeat: no-repeat;
position: relative;
}
.mask {
width: 30px;
height: 30px;
background-color: rgba(255, 220, 0, 0.6);
display: none;
position: absolute;
}
.imgbox {
width: 300px;
height: 300px;
position: relative;
left:300px;
top: -150px;
/* 超出视口的图片隐藏 */
overflow: hidden;
}
.imgbox img {
position: absolute;
width: 1208px;
height: 750px;
}
</style>
<div class="box">
<!-- 小滑块 -->
<div class="mask"></div>
</div>
<div class="imgbox">
<!-- imgbox宽高和小滑块等比例缩放 -->
<img src="./image/img-41.jpg" alt="">
</div>
<script>
//一个任何元素求相对于文档中body的坐标，就是相对于页面的距离
Object.prototype.offset = function () {
let parent1 = this.offsetParent; //获取上一级定位元素对象
let x = this.offsetLeft;
let y = this.offsetTop;
while (parent1 != null) {
x += parent1.offsetLeft;
y += parent1.offsetTop;
parent1 = parent1.offsetParent;
}
return { x, y };
};
</script>
<script>
let mask = document.querySelector(".mask");
let box = document.querySelector(".box");
let img=document.querySelector(".imgbox img");
//鼠标移入divbox就不隐藏小滑块
box.onmouseenter = function (event) {
mask.style.display = "block";
//让小滑块跟着鼠标移动，则小滑块需要设置定位
box.onmousemove = function (event) {
//求出鼠标指针在box盒子的偏移量，就是鼠标离box盒子左上角的坐标
//求出鼠标离页面（body)的距离减去box盒子离页面（body)的距离
//求鼠标在某个盒子的距离就用鼠标离页面（body)的距离减去某个盒子离页面（body)的距离
let weizhi=box.offset();
let x1=weizhi.x;
let y1=weizhi.y;
//鼠标到页面的距离
let x2=event.pageX;
let y2=event.pageY;
//鼠标离box盒子左上角的坐标
let x=x2-x1-mask.offsetHeight/2;
let y=y2-y1-mask.offsetWidth/2;
//不能让滑块超出box盒子,超出就定位在临界点
if(y<=0){
y=0;
};
if(y>=box.offsetHeight-mask.offsetHeight){
y=box.offsetHeight-mask.offsetHeight;
};
//横轴同理
if(x<=0){
x=0;
};
if(x>=box.offsetWidth-mask.offsetWidth){
x=box.offsetWidth-mask.offsetWidth;
};
//让小滑块中心跟着鼠标指针移动
mask.style.top=y+"px";
mask.style.left=x+"px";
//小滑块先右移动，图片向左移动
img.style.top=-y*(img.offsetHeight/box.offsetHeight)+"px";
img.style.left=-x*(img.offsetWidth/box.offsetWidth)+"px";
};
};
//鼠标移除divbox就隐藏小滑块
box.onmouseleave = function (event) {
mask.style.display = "none";
mask.onmousemove = null;
};
</script>
</body>
求鼠标在某个盒子的距离就用鼠标离页面（body)的距离减去某个盒子离页面（body)的距离
