<!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: 0;
padding: 0;
}
#miniBox {
height: 200px;
width: 400px;
border: 1px solid #000;
position: relative;
margin-left: 50px;
}
#miniBox img {
width: 400px;
height: 100%;
}
.mask {
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: yellow;
opacity: 0.4;
position: absolute;
left: 0;
top: 0;
display: none;
}
#bigBox {
height: 300px;
width: 600px;
border: 1px solid #000;
position: absolute;
top: 0;
left: 550px;
overflow: hidden;
display: none;
}
.bigimg {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="miniBox">
<img src="./img/11.jpg" alt="">
<div class="mask"></div>
</div>
<div id="bigBox">
<img src="./img/11.jpg" class="bigimg" alt="">
</div>
</body>
<script>
var miniBox = document.getElementById("miniBox")
var bigBox = document.getElementById("bigBox")
var mask = miniBox.getElementsByClassName("mask")[0]
miniBox.addEventListener("mouseover", function (e) {
mask.style.display = "block"
bigBox.style.display = "block"
})
miniBox.addEventListener("mouseout", function (e) {
mask.style.display = "none"
bigBox.style.display = "none"
})
miniBox.addEventListener("mousemove", function (e) {
//鼠标在minibox中的位置;pageX是鼠标在屏幕中的位置;
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
console.log(mouseX, mouseY)
//鼠标在minibox移动的位置X轴
var moveX = mouseX - mask.offsetWidth / 2
//mask的X移动距离
var moveMaxX = miniBox.offsetWidth - mask.offsetWidth
if (moveX <= 0) {
moveX = 0
} else if (
moveX >= moveMaxX
) {
moveX = moveMaxX
}
//鼠标在minibox移动的位置Y轴
var moveY = mouseY - mask.offsetHeight / 2
//mask的最大Y移动距离
var moveMaxY = miniBox.offsetHeight - mask.offsetHeight
if (moveY <= 0) {
moveY = 0
} else if (
moveY >= moveMaxY
) {
moveY = moveMaxY
}
//mask的移动位置
mask.style.left = moveX + "px"
mask.style.top = moveY + "px"
var bigImg = document.querySelector(".bigimg")//大图
//大图片最大移动距离
var bigImgMax = bigImg.offsetWidth - bigBox.offsetWidth
//大图片移动距离xy
var bigX = moveX * bigImgMax / moveMaxX
var bigY = moveY * bigImgMax / moveMaxY
//移动
bigImg.style.left = -bigX + "px"
bigImg.style.top = -bigY + "px"
})
</script>
</html>