<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>放大镜</title>
<style>
*{
padding: 0;
margin: 0;
}
#small{
width: 300px;
height: 500px;
position: absolute;
left: 100px;
top: 50px;
}
#small img{
width: 100%;
height: 100%;
}
#small span{
display: block;
width: 150px;
height: 150px;
background-color: black;
opacity: .2;
position: absolute;
top: 0;
left: 0;
display: none;
}
#big{
width:300px;
height: 300px;
display: none;
position: absolute;
left: 500px;
top: 50px;
overflow: hidden;
}
#big img{
width: 600px;
height: 1000px;
position: absolute;
}
</style>
<script>
window.onload = function(){
var oSmall = document.getElementById("small");
var Simg = document.querySelector("#small img");
var oSpan =document.querySelector("#small span");
var oBig = document.getElementById("big");
var Bimg = document.querySelector("#big img");
oSmall.onmouseover = function(){
oSpan.style.display="block";
oBig.style.display="block";
}
oSmall.onmouseout = function(){
oSpan.style.display="none";
oBig.style.display="none";
}
oSmall.onmousemove = function(eve){
var e = eve ||window.event;
var l = e.clientX -oSmall.offsetLeft-75;
var t = e.clientY -oSmall.offsetTop -75;
if(l<=0){
l=0;
}
if(l>150){
l=150;
}
if(t<=0){
t=0;
}
if(t>350){
t=350;
}
oSpan.style.left = l +"px";
oSpan.style.top =t +"px";
Bimg.style.left=-2*l+"px";
Bimg.style.top= -2*t +"px"
}
}
</script>
</head>
<body>
<div id="small">
<img src="./timg.jpeg" alt="">
<span></span>
</div>
<div id="big">
<img src="./timg.jpeg" alt="">
</div>
</body>
</html>