淘宝放大镜

实现淘宝放大镜，其实很简单，主要就是鼠标拖动放大镜的时候，相应的图片的移动，以及相应的比例关系

1.首先利用拖拽，让放大镜可以在小图框里跟随着鼠标移动，也就是实现拖拽，记得做边界处理；说一下边界处理。所谓边界处理，就是随着鼠标所移动的元素不要超过文档显示范围，也就是说，这个元素左边不能小于0，右边不能大于文档显示区域-元素本身的宽度，如果超出，那就让他等于这个宽度即可，高度也是一样的。

2.再接下来计算当小图片里的放大镜随着鼠标移动时相应的大图应该如何移动，这是实现放大镜效果的关键一步

<script type="text/javascript">
	
	//鼠标移入小图区：
	$id("small").onmouseover = function(){
		//放大镜显示
		$id("mask").style.display = "block";
		//大图区显示 
		$id("big").style.display = "block";
	}
	$id("small").onmouseout = function(){
		$id("mask").style.display = "none";
		$id("big").style.display = "none";
	}
	
	//在小图区鼠标移动
	$id("small").onmousemove = function(e){
		var e = e || event;
		var l = e.pageX - $id("box").offsetLeft - $id("mask").offsetWidth/2;
		var t = e.pageY - $id("box").offsetTop - $id("mask").offsetHeight/2
		
		l = l < 0 ? 0 : ( l> $id("box").offsetWidth - $id("mask").offsetWidth ? $id("box").offsetWidth - $id("mask").offsetWidth : l);
		t = t < 0 ? 0 : ( t> $id("box").offsetHeight - $id("mask").offsetHeight ? $id("box").offsetHeight - $id("mask").offsetHeight : t);
		//边界处理
		
		//放大镜移动
		$id("mask").style.left = l + "px";
		$id("mask").style.top = t + "px";
		
		//大图的L = 小图的l*大图的宽/小图的宽 
		var L = l * $id("bigImg").offsetWidth/$id("small").offsetWidth;
		var T = t * $id("bigImg").offsetHeight/$id("small").offsetHeight;
		
		$id("bigImg").style.left = -L + "px";
		$id("bigImg").style.top = -T + "px";
		
	}
	

一般情况下正常的放大镜效果都是鼠标移入到放大镜元素的中间时，元素才会跟着鼠标随意移动，所以这个时候要记得减去元素本身的一般，而大图移动的比例是：小图宽/大图宽=放大镜所能移动的（左边/上边）/大图能够移动的距离，这个比例式中只有大图移动的距离是不知道的，这也是我们所要求的，做个数学运算就可以做出来。