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>