js写简化放大镜

html写原始图及放大图

<div id="box1">
			<img src="img/fan1.jpg" >
			<div id="box2">
				
			</div>
		</div>
		<div id="box3">
			<img id="img" src="img/fan1.jpg" >
		</div>

css写三个盒子的样式

*{
				padding: 0;
				margin: 0;
			}
			#box1{
				position: relative;
				width: 290px;
				height: 169px;				
			}
			#box1>img{
				width: 290px;
			}			
			#box2{
				position: absolute;
				/* top: 0;
				left: 0; */
				width: 100px;
				height: 100px;
				background: #00FFFF;
				opacity: 50%;
				display: none;
			}
			#box3{
				position: absolute;
				left: 300px;
				top: 0;
				width:400px;
				height: 400px;				
				overflow: hidden;
				display: none;
			}
			#box3>img{
				width: 1160px;				
			}

js让效果实现

var div1 = document.getElementById('box1')
			var div2 = document.getElementById('box2')
			var div3 = document.getElementById('box3')
			var img = document.getElementById('img')
			div1.onmouseover=function(e){
				div2.style.display='block';
				div3.style.display='block';
				div1.onmousemove=function(e1){					
					var l = e1.clientX-div2.offsetWidth/2-div1.offsetLeft  //让鼠标在小DIV居中
					var t = e1.clientY-div2.offsetHeight/2-div1.offsetTop  //让鼠标在小DIV居中
					if (l<=0) {
						l=0;
					} else if(l>=div1.offsetWidth-div2.offsetWidth){
						l=div1.offsetWidth-div2.offsetWidth;
					}
					if (t<=0) {
						t=0;
					} else if(t>=div1.offsetHeight-div2.offsetHeight){
						t=div1.offsetHeight-div2.offsetHeight;
					}
					var n = l*img.offsetWidth/div1.offsetWidth;
					var m =t*img.offsetHeight/div1.offsetHeight;
					img.style.marginLeft="-"+n+"px";
					img.style.marginTop="-"+m+"px";					
					div2.style.left=l+"px";
					div2.style.top=t+"px";
				}
				div1.onmouseout=function(){
					div2.style.display='none';
					div3.style.display='none';
				}
			}