**JS实现淘宝产品放大镜效果**

JS实现淘宝产品放大镜效果
鼠标往左移，大图片相当于大图片盒子往右移

<script>
	window.onload = function(){
		//总盒子
		var objDemo = document.getElementById("demo");
		//小图盒子
		var objSmall = document.getElementById("small-box");
		//浮动块
		var objFloat = document.getElementById("float-box");
		//大图盒子
		var objBig = document.getElementById("big-box");
		//大图图片
		var objImage = document.getElementById("big");

		objSmall.onmouseover = function(){
			objFloat.style.display = "block";
			objBig.style.display = "block";
		}
		objSmall.onmouseout = function(){
			objFloat.style.display = "none";
			objBig.style.display = "none";
		}
		objSmall.onmousemove = function(event){
			 var _event = event || window.event;  //兼容多个浏览器的event参数模式

			 //获取鼠标相对于小图的位置=鼠标X轴-大容器的left-小盒子的left-浮动块的一半
			 var left = _event.clientX- objDemo.offsetLeft-objSmall.offsetLeft-objFloat.offsetWidth/2;
			 var top = _event.clientY - objDemo.offsetTop-objSmall.offsetTop-objFloat.offsetHeight/2;

			 //判断当浮动块在四条边的时候
			 if(left < 0){
			 	left = 0;
			 }else if(left >(objSmall.offsetWidth -objFloat.offsetWidth)){
			 	left = objSmall.offsetWidth -objFloat.offsetWidth;
			 }
			  if(top < 0){
			 	top = 0;
			 }else if(top >(objSmall.offsetHeight -objFloat.offsetHeight)){
			 	top = objSmall.offsetHeight -objFloat.offsetHeight;
			 }
			 
			 //获取大图的位置
			 var bigx = left/(objSmall.offsetWidth-objFloat.offsetWidth);
			 objImage.style.left = -bigx*(objImage.offsetWidth-objBig.offsetWidth)+"px";

			 var bigy = top/(objSmall.offsetHeight-objFloat.offsetHeight);
			 objImage.style.top = -bigy*(objImage.offsetHeight-objBig.offsetHeight)+"px";
			 
			 //使鼠标在浮动块中间
			 objFloat.style.left = left +"px";
			 objFloat.style.top = top +"px";
		}
	}
</script>