<!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>
<style>
* {
margin: 0px;
padding: 0;
}
.box {
height: 500px;
width: 500px;
border: 1px solid #E6E9E6;
position: relative;
margin-left: 100px;
text-align: center;
float: left;
}
.box img {
height: 250px;
}
.yellow {
height: 300px;
width: 300px;
background-color: rgba(0, 0, 255, .5);
position: absolute;
top: 0px;
left: 200px;
display: none;
pointer-events: none;
/* 解决遮盖层闪烁问题 */
}
.big{
height: 800px;
width: 800px;
border: 1px solid #E6E9E6;
float: right;
position: relative;
overflow: hidden;
}
.big img{
height: 600px;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class="box"><img src="../img/1.png" class="small" alt=""><div class="yellow"></div></div>
<div class="big"><img src="../img/1.png" class="bigimg" alt=""></div>
<script>
let yellow = document.querySelector(".yellow")
let box = document.querySelector(".box")
let img = document.querySelector(".small")
let big =document.querySelector(".big")
let bigimg=document.querySelector(".bigimg")
// 引入元素
box.addEventListener("mouseover", function (e) {
// 鼠标划过事件
yellow.style.display = "block"
// 显示
})
box.addEventListener("mouseout", function (e) {
yellow.style.display = "none"
})
box.addEventListener("mousemove", function (e) {
let x = e.pageX - box.offsetLeft
let y = e.pageY - box.offsetTop
// console.log(x,y);
// 鼠标坐标减盒子距离 即鼠标在盒子内坐标
yellow.style.left = x - yellow.offsetWidth/2 + "px"
// 遮盖层x坐标
yellow.style.top = y - yellow.offsetHeight/ 2 + "px"
// 遮盖层y坐标
x=x-yellow.offsetWidth/2
y=y-yellow.offsetHeight/2
// 减去遮盖层的一半
if(x<=0){
yellow.style.left=0+"px"
// 遮盖层y坐标 一定要记得加px!
}
else if(x>=box.offsetWidth-yellow.offsetWidth){
yellow.style.left=box.offsetWidth-yellow.offsetWidth+"px"
// 遮盖层x坐标
}
if(y<=0){
yellow.style.top=0+"px"
}
else if(y>=box.offsetHeight-yellow.offsetHeight){
yellow.style.top=box.offsetHeight-yellow.offsetHeight+"px"
}
let smallx=box.offsetWidth-yellow.offsetWidth
// 小图x方向移动范围
let smally=box.offsetHeight-yellow.offsetHeight
// 小图y方向移动范围
let smallX=e.pageX - box.offsetLeft- yellow.offsetWidth/2
// 小图x方向坐标
let smallY=e.pageY - box.offsetTop- yellow.offsetHeight/ 2
// 小图y方向坐标
let bigx=big.offsetWidth-bigimg.offsetWidth
// 大图x方向移动范围
let bigy=big.offsetHeight-bigimg.offsetHeight
// 大图y方向移动范围
let bigX=bigx*smallX/smallx
// 大图x坐标
let bigY=bigy*smallY/smally
// 大图y坐标
bigimg.style.top=-bigY+"px"
bigimg.style.left=bigX+"px"
})
</script>
</body>
</html>