<style>
* {
margin: 0;
padding: 0;
}
.containr {
width: 1200px;
margin: 0 auto;
display: flex;
}
.left {
width: 350px;
height: 350px;
border: 2px solid red;
position: relative;
margin-left: 20px;
}
.left>img {
width: 100%;
height: 100%;
}
.left>.glass {
width: 200px;
height: 200px;
background-color: yellow;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
display: none;
cursor: move;
}
.right {
width: 500px;
height: 500px;
border: 2px solid blue;
margin-left: 20px;
overflow: hidden;
display: none;
position: relative;
}
.right img {
width: 200%;
height: 200%;
position: absolute;
left: 0px;
top: 0px;
}
</style>
<body>
<div class="containr">
<div class="left">
<img src="./cat.jpg"alt="" />
<div class="glass"></div>
</div>
<div class="right">
<img src="./cat.jpg" id="rimg" alt="" />
</div>
</div>
</body>
<script>
let leftone = document.querySelector(".left");
let box = document.querySelector(".glass");
let rightone = document.querySelector(".right");
let rimg = document.getElementById("rimg")
function getPosition(e) {
var e = e || window.event;
let top = e.clientY - leftone.offsetTop - box.offsetHeight / 2
let left = e.clientX - leftone.offsetLeft - box.offsetWidth / 2
let maxtop = leftone.offsetHeight - box.offsetHeight
let maxleft = leftone.offsetWidth - box.offsetWidth
let mintop = 0
let minleft = 0
let mvtop
let mvleft
if (top < mintop) {
box.style.top = mintop + "px"
mvtop = mintop
} else if (top > maxtop) {
box.style.top = maxtop + "px"
mvtop = maxtop
} else {
box.style.top = top + "px"
mvtop = top
}
if (left < minleft) {
box.style.left = minleft + "px"
mvleft = minleft
} else if (left > maxleft) {
box.style.left = maxleft + "px"
mvleft = maxleft
} else {
box.style.left = left + "px"
mvleft = left
}
rimg.style.top = -mvtop * 2 + "px"
rimg.style.left = -mvleft * 2 + "px"
}
leftone.onmousemove = function (e) {
console.log(111);
var e = e || window.event;
rightone.style.display = "block";
box.style.display = "block";
getPosition(e)
}
leftone.onmouseleave = function (e) {
console.log(222);
var e = e || window.event;
rightone.style.display = "none";
box.style.display = "none";
getPosition(e)
}
// leftone.οnmοusemοve=function(e){
// console.log(333);
// let x
// }
</script>
184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
