仿淘宝商品图片放大镜效果(鼠标移动上去会出现放大的图片，并且可以移动)...

    *{
        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下，移动不是很流畅，暂时没解决。但是可以用。

转载于:https://www.cnblogs.com/iu90/archive/2013/05/22/3093299.html