如何实现在展示商品时，放大商品细节

思路： 关于布局 1.有一个展示商品的总的盒子，ID名为show。 2在展示商品的大盒子里，首先要有一个放商品图的盒子，ID名为MiddleBox，里面放商品图 3.之后在展示商品的大盒子里，在MiddleBox盒子右面有一块展示区域，ID名为BigBox，用来存放放大商品后的图片 4.要有一个放大镜的div，ID名为zoom，在MiddleBox上移动 关于样式： 1.大盒子show给个定位relative 2.middleBox、BigBox、zoom相对于大盒子定位，即position：absolute； CSS详情见以下代码： ``` body{ padding: 0; margin: 0; } img{ display: block; border: none; } #show{ position: relative; width: 250px; height: 300px; border: 1px solid #ccc; } #middle{ position: absolute; width:250px; height: 300px; border:1px solid #ccc; } #middle img{ width:250px; height: 300px; } #zoom{ position: absolute; width:100px; height: 100px; background: #00FFFF; cursor: move; opacity: 0.5; display: none; }

		#big{
			position: absolute;
			width: 250px;
			height: 300px;
			border: 1px solid #ccc;
			overflow: hidden;
			left: 250px;
			display: none;
			top: -1px;
		}
		#big img{
			position: absolute;
			width: 625px;
			height: 900px;
		
		}

关于JS：
1.让放大镜的div（zoom）跟随鼠标在MiddleBox上移动
2.让大图片的位置随着zoom的位置改变而改变。
3.对于放大镜（zoom）的尺寸除以MiddleBox的尺寸应当等于BigBox盒子的尺寸除以BigBox盒子里放的大图片的尺寸
4.BigBox里面的大图片移动的距离应等于放大镜（zoom）的移动的距离除以MiddleBox的尺寸，再乘以 大图片的尺寸
  JS详情见以下代码：

		var oMiddle=document.getElementById("middle");
		var oShow=document.getElementById("show");
		var oBig=document.getElementById("big");
		var oZoom=document.getElementById("zoom");
		var oImg=oBig.children[0];
		
		
		oMiddle.onmouseover=function(){
			oZoom.style.display="block";
			oBig.style.display="block";
			
		}
		oMiddle.onmouseout=function(){
			oZoom.style.display="none";
			oBig.style.display="none";
		}
		
		
		oMiddle.onmousemove=function(e){
			var evt=e||event;
			var x=evt.clientX-oMiddle.offsetLeft-oShow.offsetLeft;
			var y=evt.clientY-oMiddle.offsetTop-oShow.offsetTop;
			var _left=x-oZoom.offsetWidth/2;
			var _top= y-oZoom.offsetHeight/2;
			var cw=oMiddle.clientWidth;
			var ch=oMiddle.clientHeight;
			var zw=oZoom.offsetWidth;
			var zh=oZoom.offsetHeight;
			
			
			if(_left<=0){
				_left=0;
			}
			if(_top<=0){
				_top=0;
			}
			if(_left>=cw-zw){
				_left=cw-zw;
			}
			if(_top>=ch-zh){
				_top=ch-zh;
			}								
			oZoom.style.left=_left+"px";
			oZoom.style.top=_top+"px"；
			
			oImg.style.left=-_left/oMiddle.offsetWidth*oImg.offsetWidth+"px";
			oImg.style.top=-_top/oMiddle.offsetHeight*oImg.offsetHeight+"px";
			
		}