十.放大镜效果的demo

详情页放大镜效果收录

Javascript

window.onload = function(){
    var oDiv = document.getElementById('div1');
    var mark = oDiv.getElementsByTagName('span')[0];
    
    var oDiv2 = document.getElementById('div2');
    var img2 = oDiv2.getElementsByTagName('img')[0];
    
    oDiv.onmouseout = function(){
        mark.style.display = 'none';
    };
    
    oDiv.onmousemove = function(ev){
        mark.style.display = 'block';
        var ev = ev || window.event;
        
        var L = ev.clientX - oDiv.offsetLeft - mark.offsetWidth/2;
        var T = ev.clientY - oDiv.offsetTop - mark.offsetHeight/2;
        
        if(L<0){
            L = 0;
        }
        else if(L>oDiv.offsetWidth - mark.offsetWidth){
            L = oDiv.offsetWidth - mark.offsetWidth;
        }
        
        if(T<0){
            T = 0;
        }
        else if(T>oDiv.offsetHeight - mark.offsetHeight){
            T = oDiv.offsetHeight - mark.offsetHeight;
        }
        
        mark.style.left = L + 'px';
        mark.style.top = T + 'px';
        
        var scaleX = L/(oDiv.offsetWidth - mark.offsetWidth);
        var scaleY = T/(oDiv.offsetHeight - mark.offsetHeight);
        
        img2.style.left = - scaleX * (img2.offsetWidth - oDiv2.offsetWidth) + 'px';
        img2.style.top = - scaleY * (img2.offsetHeight - oDiv2.offsetHeight) + 'px';        
        
    };
    
};

HTML

<div id="div1">
    ![](small.jpg)
    <span class="mark"></span>
</div>
<div id="div2">
    ![](big.jpg)
</div>

CSS

#div1{ width:180px; height:180px; overflow:hidden; position:relative;top:100px;left:50px;}
#div1 .mark{ width:100px; height:100px; background:yellow; opacity:0.5; filter:alpha(opacity=50); position:absolute; left:0; top:0; display:none;}
#div1 img{width:100%;}
#div2{ width:500px; height:500px; position:absolute; left:250px; top:100px; overflow:hidden;}
#div2 img{ position:absolute; left:0; top:0;width:900px;height:900px;}