<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#day {
width: 450px;
position: relative;
margin: 30px;
overflow: hidden;
float: left;
cursor: move;
}
#day img {
width: 100%;
height: 100%;
}
.mask {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
background: rgba(244,78,78,0.2);
display: none;
}
#bg {
width: 500px;
height: 500px;
position: relative;
top: 30px;
float: left;
display: none;
overflow: hidden;
}
#imgBg {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="day">
<img src="image/4.jpg">
<div class="mask"></div>
</div>
<div id="bg">
<img src="image/4.jpg" id="imgBg">
</div>
<script type="text/javascript">
let day = document.getElementById("day")
let bg = document.getElementById("bg")
let imgBg = document.getElementById("imgBg")
let img = day.children[0]
let mask = day.children[1]
day.onmouseover = function(e) {
mask.style.display = "block";
bg.style.display = "block";
// console.log(day.offsetLeft,day.offsetTop)
day .onmousemove = function(e) {
let X = e.pageX - day.offsetLeft-mask.offsetWidth/2;
let Y = e.pageY - day.offsetTop - mask.offsetHeight/2;
mask.style.top = Y+"px";
mask.style.left = X+"px";
let maskMax = day.offsetWidth - mask.offsetWidth;
let imgMax = imgBg.offsetWidth - bg.offsetWidth;
// console.log(maskMax,imgMax)
let bgX = X*imgMax/maskMax;
let bgY = Y*imgMax/maskMax;
console.log(bgX,bgY)
imgBg.style.left = -bgX+"px";
imgBg.style.top = -bgY+"px";
}
}
day.onmouseout = function() {
mask.style.display = "none";
bg.style.display = "none";
}
</script>
</body>
</html>
6096
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
