<!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>