放大镜
<style>
* {
margin: 0;
padding: 0;
}
.div1 {
width: 400px;
height: 400px;
margin: 30px 0 0 20px;
position: relative;
}
.mark {
width: 200px;
height: 200px;
position: absolute;
background: rgba(0, 0, 0, 0.3);
top: 0;
left: 0;
display: none;
}
.div1 img {
width: 400px;
height: 400px;
}
.div2 {
width: 400px;
height: 400px;
position: absolute;
top: 30px;
left: 460px;
overflow: hidden;
display: none;
}
.div2 img {
position: absolute;
}
</style>
</head>
<body>
<div class="div1">
<img src="1.jpg" alt="">
<div class="mark"></div>
</div>
<div class="div2"><img src="1.jpg" alt=""></div>
</body>
<script>
var div1 = document.querySelector(".div1")
var mark = document.querySelector(".mark")
var div2 = document.querySelector(".div2")
var rightImg=div2.querySelector("img")
div1.onmouseover = function () {
mark.style.display = "block"
div2.style.display = "block"
}
div1.onmousemove = function (e) {
var e = e || window.event
var top1 = e.pageY - div1.offsetTop - parseInt(mark.offsetHeight / 2)
var left1 = e.pageX - div1.offsetLeft - parseInt(mark.offsetWidth / 2)
var maxX = div1.offsetWidth - mark.offsetWidth
var maxY = div1.offsetHeight - mark.offsetHeight
var rightTop, rightLeft
if (left1 <= 0) {
mark.style.left = 0 + 'px'
rightLeft = 0
} else if (left1 >= maxX) {
mark.style.left = maxX + 'px'
rightLeft = maxX
} else {
mark.style.left = left1 + 'px'
rightLeft = left1
}
if (top1 <= 0) {
mark.style.top = 0 + 'px'
rightTop = 0
} else if (top1 >= maxY) {
mark.style.top = maxY + 'px'
rightTop = maxY
} else {
mark.style.top = top1 + 'px'
rightTop = top1
}
rightImg.style.top = -2 * rightTop + 'px'
rightImg.style.left = -2 * rightLeft + 'px'
}
div1.onmouseout = function () {
mark.style.display = "none"
div2.style.display = "none"
}
</script>