利用js制作放大镜效果

css代码

*{margin: 0;padding: 0;}
.mian{}
#leftbox1{width: 330px;height: 487.5px;border: 2px #000 solid;margin: 20px 20px;float: left;position: relative;cursor: crosshair;overflow: hidden;}
#box{width: 165px;height: 243.75px;background: rgba(61,61,61,0.2);position: absolute;opacity: 0.8;display: none;}
#rightbox2{width: 330px;height: 487.5px;border: 2px #000 solid;margin: 20px 20px 0;float:left;position: relative;overflow: hidden;display: none;}
#pic{position: absolute;}
.cover{width: 330px;height: 487.5px;position: absolute;top: 0;left: 0;background:  reba(0,0,0,0);}

html代码

<div class="mian">
		<div id="leftbox1">
			<img src="img/mei2.jpg" width="100%" height="100%"/>
			<div id="box"></div>
			<div class="cover"></div>
		</div>
		<div id="rightbox2">
			<img src="img/mei2.jpg" id="pic"/>
		</div>
	</div>

JavaScript代码

var left=document.getElementById("leftbox1")
	var right=document.getElementById("rightbox2")
	var box=document.getElementById("box")
	var pic=document.getElementById("pic")
	left.onmousemove=function(event){
		//获取事件对象
		var ev=window.event || event
		//获取鼠标与元素的位置,相对于被触发的元素左上角位置
		var m_left=ev.layerX ||ev.offsetX
		var m_top=ev.layerY ||ev.offsetY
		// document.title=(m_left+"|"+m_top)
		
		//计算box位置
		var box_left=m_left-82.5;
		var box_top=m_top-121.875;
		
		//增加判断不让XY出线
		box_left=box_left<0?0:box_left
		box_left=box_left>165?165:box_left
		box_top=box_top<0?0:box_top
		box_top=box_top>243.75?243.75:box_top
		// document.title = (box_left+"|"+box_top);
		//让box动起来
		box.style.left=box_left+"px";
		box.style.top=box_top+"px";
		//右侧图片动起来
     	pic.style.left = "-"+box_left*2+"px";
	    pic.style.top = "-"+box_top*2+"px";
		}
		left.onmouseover=function(){
			right.style.display="block"
			box.style.display="block"
		}
		left.onmouseout=function(){
			right.style.display="none"
			box.style.display="none"
		}

点击测试

打包下载