仿淘寶商品圖片放大鏡效果(鼠標移動上去會出現放大的圖片，並且可以移動)

    *{
        margin:0;
        padding:0;    
    }
    
    ul li{
        list-style-type:none;    
    }
    
    #content{
        width:950px;
        margin:20px;    
    }
    
    #magnifier{
        width:460px;
        height:460px;
        border:1px solid #eee;
        position:relative;
    }
    
    #magnifier span{
        width:230px;
        height:150px;
        background:url(http://img04.taobaocdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png);
        position:absolute;    
        display:none;
        cursor:move;
    }
    
    #magnifier .small_img{
        position:absolute;
        background:red;
        font-size:0; /* 休正IE 67 圖片下方一個像素BUG*/
    }
    
    #magnifier .big_img{
        position:absolute;
        width:400px;
        height:260px;
        left:465px;
        top:0px;
        border:1px solid #eee;
        display:none;
        overflow:hidden;
    }
    
    #magnifier .big_img img{
        display:block;
        position:absolute;
        left:0;
        top:0;
    }

  <div id="magnifier">
            
            <!-- -->
            <div class="small_img">
                <img src="http://img04.taobaocdn.com/bao/uploaded/i4/14935023161110472/T13uaJXvtcXXXXXXXX_!!0-item_pic.jpg_460x460.jpg" />
            </div>
            
            <div class="big_img">
                <img src="http://img04.taobaocdn.com/bao/uploaded/i4/14935023161110472/T13uaJXvtcXXXXXXXX_!!0-item_pic.jpg" />
            </div>
            
            <span class="float"></span>
        </div>
        

window.onload = function(){
        
        magnifier();
        
        function magnifier(){
            //獲取DOM
            var migni = document.getElementById('magnifier'); //最外層DIV
            
            var sLayer = migni.getElementsByTagName('div')[0]; //左邊小的圖片容器
            var bLayer = migni.getElementsByTagName('div')[1]; //右邊大的圖片容器
            
            var flt = migni.getElementsByTagName('span')[0]; // 跟隨鼠標移動的浮動層
            
            var smallImg = sLayer.getElementsByTagName('img')[0]; //800*800的大圖
            var bigImg = bLayer.getElementsByTagName('img')[0]; //800*800的大圖
            
            
            
            //注冊事件
            migni.onmouseover = function(e){
            
                // 休正事件對象
                var evt = fixEvent(e);
                
                //當鼠標在migni里快速的移動，鼠標會在flt和smallImg中快速切換，不斷觸發事件和事件冒泡間接的觸發事件。需要屏蔽掉。
                if(evt.relatedTarget == flt || evt.relatedTarget == smallImg) return false;
                
                flt.style.display = 'block';
                
                bLayer.style.display = 'block';
            }
            
            migni.onmouseout = function(e){
                
            
                var evt = fixEvent(e);
                
                if(evt.relatedTarget == flt || evt.relatedTarget == smallImg) return false;
                
                flt.style.display = 'none';
                
                bLayer.style.display = 'none';
            }
            
            
            migni.onmousemove = function(e){ //事件必須綁定在外層上，否則鼠標在 flt上移動，事件不會冒泡到migni上
                
                var evt = fixEvent(e);
                var l = evt.pageX - migni.offsetLeft - flt.offsetWidth/2;
                var t = evt.pageY - migni.offsetTop - flt.offsetHeight/2;
                
                
                // 給 flt設置活動范圍
                if(l<0){
                    l=0;    
                }else if(l>migni.offsetWidth - flt.offsetWidth){
                    l = migni.offsetWidth - flt.offsetWidth;    
                }
                
                if(t<0){
                    t=0;    
                }else if(t>migni.offsetHeight - flt.offsetHeight){
                    t= migni.offsetHeight - flt.offsetHeight;
                }
                
                //設置浮動層的位置
                flt.style.left = l + 'px';
                flt.style.top = t + 'px';
                //console.log(e.pageX);
                
                
                //設置大圖的位置。
                
                bigImg.style.left = -(l/smallImg.offsetWidth * bigImg.offsetWidth) + 'px';
                bigImg.style.top = -(t/smallImg.offsetHeight * bigImg.offsetHeight) + 'px'
                
            }
            
            //修正事件對象，處理兼容性
            function fixEvent(evt){
                
                var e = evt || window.event;
                
                if(!e.target){  //IE
                
                    if(e.type == 'mouseover'){
                        e.relatedTarget = e.fromElement;    
                    }else if(e.type == 'mouseout'){
                        e.relatedTarget = e.toElement;
                    }
                    
                    e.pageX = document.documentElement.scrollLeft + e.clientX;
                    e.pageY = document.documentElement.scrollTop + e.clientY;
                }
                    
                    
                
                return e;
                
            }
            
        }
    }
    

IE 6 和 IE7下，移動不是很流暢，暫時沒解決。但是可以用。