<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>放大镜</title>
</head>
<style>
.box{
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
.box img{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.box1{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 99;
}
.hand{
width: 100px;
height: 100px;
background: rgba(0, 0, 100, 0.6);
position: absolute;
left: 0;
top: 0;
display: none;
}
.bigbox{
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: 303px;
overflow: hidden;
}
.bigbox img{
display: none;
position: absolute;
left: 0;
top: 0;
width: 900px;
height: 900px;
}
</style>
<body>
<div class="box">
<img src="jujingyi.jpg" alt="">
<div class="box1"></div>
<div class="hand"></div>
</div>
<div class="bigbox">
<img src="jujingyi.jpg" alt="">
</div>
</body>
</html>
<script>
let box=document.querySelector(".box");
let box1=document.querySelector(".box1");
let hand=document.querySelector(".hand");
let bigbox=document.querySelector(".bigbox img");
box.onmouseenter=function(){ //鼠标移入抓手（蓝色）和右边图片显示
hand.style.display="block";
bigbox.style.display="block";
box1.onmousemove=function(event){//事件移动
let x0=hand.offsetWidth/2; //鼠标距离抓手hand的边框距离中心
let y0=hand.offsetHeight/2;
let x1=event.clientX; //鼠标距离页面左边的距离
let y1=event.clientY;//鼠标距离页面上面的距离
let left=x1-x0; //抓手盒子距离页面左边的距离
let top=y1-y0;//抓手盒子距离页面右边的距离
if(left<0){ //判断条件 使抓手盒子不离开放图片的盒子
left=0;
}
if(top<0){
top=0;
}
if(top>200){
top=200;
}
if(left>200){
left=200
}
hand.style.left=left+"px"; //抓手盒子随鼠标移动的位置
hand.style.top=top+"px";
bigbox.style.left=-left*3+"px"; //右边图片放大三倍随鼠标移动实时变化
bigbox.style.top=-top*3+"px";
}
}
box.onmouseleave=function(){ //鼠标离开左边放图片的盒子 抓手和右边放大图片都消失
hand.style.display="none";
bigbox.style.display="none";
}
</script>