放大镜效果

//css
	#box_l {width: 400px;height: 450px;border:1px solid #000;position: absolute;left: 50px;top: 100px;}
	#box_l img{width: 400px;height: 450px;}
	#box_l span{background:rgba(200,200,200,0.6);position: absolute;left: 0;top: 0;display: none;}
		/*为了解决在js中的移动闪烁问题*/
	#box_l p{width: 400px;height: 450px;margin: 0;position: absolute;z-index: 1;left:0;top:0;}
	
	#box_r {width: 400px;height: 450px;border:1px solid #000;position: absolute;left: 500px;top: 100px;overflow: hidden;display: none;}
	#box_r img{width: 1200px;position: absolute;}
//body
	<div id="box_l">
		<img src="https://gd4.alicdn.com/imgextra/i1/15574073/O1CN01LCL4Gz1fxTfYMVIrp_!!15574073.jpg" />
		<span></span>
		<p></p>
	</div>
	<div id="box_r">
		<img src="https://gd4.alicdn.com/imgextra/i1/15574073/O1CN01LCL4Gz1fxTfYMVIrp_!!15574073.jpg" />
	</div>
//js
	function Minior(){
	
			this.boxL = document.querySelector("#box_l");
			this.boxR = document.querySelector("#box_r");
			this.boxlSp = document.querySelector("#box_l span");
			this.boxrImg = document.querySelector("#box_r img");
			//绑定事件
			this.addEvent();
	
		}
		Minior.prototype.init = function(){
			//放大图片的宽 / 高 ÷放大容器的宽 / 高
			var w = this.boxrImg.offsetWidth / this.boxR.offsetWidth;
			var h = this.boxrImg.offsetHeight / this.boxR.offsetHeight;
			//由上可以计算出span对应的宽高
			this.boxlSp.style.width = this.boxL.offsetWidth / w + "px";
			this.boxlSp.style.height = this.boxL.offsetHeight / h + "px";
			console.log(this.boxlSp.style.width);
	
		}
		Minior.prototype.addEvent = function(){
			//保存变量
			var that = this;
			//事件监听
			this.boxL.addEventListener("mouseover",function(){
				that.over();
				that.init();
			})
			this.boxL.addEventListener("mouseout",function(){
				that.out();
			})
			this.boxL.addEventListener("mousemove",function(eve){
				var e = eve || window.event;
				that.move(e);
			})
		}
		Minior.prototype.over = function(){
			//当鼠标在图片上方移动时显示小方块和放大镜
			this.boxlSp.style.display = "block";
			this.boxR.style.display = "block";
		}
		Minior.prototype.out = function(){
			//当鼠标离开后小方块和放大镜消失
			this.boxlSp.style.display = "none";
			this.boxR.style.display = "none";
		}
		Minior.prototype.move = function(e){
			//计算鼠标离左边和上边的距离
			var l = e.offsetX - this.boxlSp.offsetWidth/2;
			var t = e.offsetY - this.boxlSp.offsetHeight/2;
	
			//设置边界，使其不能越过边框
			if(l < 0) l=0;
			if(t < 0) t=0;
			if(l > this.boxL.offsetWidth-this.boxlSp.offsetWidth) l = this.boxL.offsetWidth-this.boxlSp.offsetWidth;
			if(t > this.boxL.offsetHeight-this.boxlSp.offsetHeight) t = this.boxL.offsetHeight-this.boxlSp.offsetHeight;
	
			//计算比例
			var x = l / (this.boxL.offsetWidth - this.boxlSp.offsetWidth);
			var y = t / (this.boxL.offsetHeight - this.boxlSp.offsetHeight);
					
			//让span跟随鼠标
			this.boxlSp.style.left = l + "px";
			this.boxlSp.style.top = t + "px";
					
			//根据比例移动大图
			// this.boxrImg.style.left = -x * (this.boxrImg.offsetWidth - this.boxR.offsetWidth) + "px";
			// this.boxrImg.style.top = -y * (this.boxrImg.offsetHeight - this.boxR.offsetHeight) + "px";
	
			this.boxrImg.style.left = x * (this.boxR.offsetWidth - this.boxrImg.offsetWidth) + "px";
			this.boxrImg.style.top = y * (this.boxR.offsetHeight - this.boxrImg.offsetHeight) + "px";
		}
	
	
		window.onload = function(){
			new Minior();
		}	

效果如下：