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

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

要点：
1、鼠标往左移，大图片相当于大图片盒子往右移
2、鼠标移动时小图与大图的位置关系
根据图片所示的关系应是left / objSmall.offsetWidth-objFloat.offsetWidth=大 图移动的位置 / 整个大图图片的offset.offsetWidth-objBig.offsetWidth
3、特殊4个情况
考虑浮动块移到盒子外面的情况、
4、鼠标始终在浮动块中间

JavaScript代码

<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轴-大容器的offsetLeft-小盒子的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>

HTML代码

<div id="demo">
		<div id="small-box">
			<div id="float-box"></div>
			<img src="macbook-small.jpg" alt="" >
		</div>
		<div id="big-box">
			<img src="macbook-big.jpg" alt="" id="big">
		</div>
	</div>

CSS代码

<style type="text/css" media="screen">
		*{
			margin: 0;
			padding: 0;
		}
		#demo {
            width: 400px;
            height: 255px;
            margin: 50px;
            position: relative;
            border: 1px solid #ccc;
        }
        #small-box {
            position: relative;
            z-index: 1;
        }
        #float-box {
            display: none;
            width: 160px;
            height: 120px;
            position: absolute;
            background: #ffffcc;
            border: 1px solid #ccc;
            filter: alpha(opacity=50);
            opacity: 0.5;
        }
        #big-box {
            display: none;
            position: absolute;
            top: 0;
            left: 460px;
            width: 400px;
            height: 300px;
            overflow: hidden;
            border: 1px solid #ccc;
            z-index: 1;
        }

        #big-box img {
            position: absolute;
            z-index: 5
        }
	</style>