原生js模仿京东图片放大镜效果

本是古典何须时尚 2022-05-29 12:21 278阅读 0赞

实现放大镜效果，是需要两张图片，记得两张图片的比例要保持一致哦

嗯，挺简单的，所以直接上代码喽，有不懂的可以评论区留言哦

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>放大镜练习</title>
        <style>
            #box{width:200px; height:200px; position:absolute; left:10px; top:10px;}
            #img1{width:200px; height:200px;}
            #oSpan{width:80px; height:80px; opacity:0.5; filter:alpha(opacity=50); position:absolute; background:yellow; display:none;}
            #mark{width:200px; height:200px; position:absolute; opacity:0; filter:alpha(opacity=0); left:0px; top:0px;}
            #big{width:400px; height:400px; overflow:hidden;  position:absolute; left:300px; top:10px; display:none;}
            #bimg{position:absolute; left:0px; top:0px;}
        </style>
    </head>
    <body>
    <div id="box">
        <img id="img1" src="b2.jpg"/>
        <span id="oSpan"></span>
        <div id="mark"></div>
    </div>
    <div id="big"><img id="bimg" src="b1.jpg"/></div>
    <script>
        var oDiv = document.getElementById('box');
        var oSpan = oDiv.getElementsByTagName('span')[0];
        var oBig = document.getElementById('big');
        var oBimg = document.getElementById('bimg');
        oDiv.onmouseover = function(ev){
    
            var ev = ev||event;
            var L = ev.clientX - oDiv.offsetLeft;
            var T = ev.clientY - oDiv.offsetTop;
            oSpan.style.display = 'block';
            oSpan.style.left = L - oSpan.offsetWidth+'px';//计算鼠标移入时，放大镜的位置
            oSpan.style.top = T - oSpan.offsetHeight+'px';
            oBig.style.display = 'block';
            document.onmousemove = function(ev){
                var ev = ev||event;
                var oW = oDiv.offsetWidth - oSpan.offsetWidth;
                var oH = oDiv.offsetHeight - oSpan.offsetHeight;
                var b = oBimg.offsetWidth/oDiv.offsetWidth;
                L = ev.clientX -oSpan.offsetWidth/2;
                T = ev.clientY - oSpan.offsetHeight/2;
                if(L<0){//下面的是限制放大镜的移动范围
                    L=0;
                }
                if(L>oW){
                    L = oW + 'px';
                }
                if(T<0){
                    T=0;
                }
                if(T>oH){
                    T = oH + 'px';
                }
                oSpan.style.left = L +'px';
                oSpan.style.top = T +'px';
                oBimg.style.left = - L*b +'px';
                oBimg.style.top = -T*b +'px';
    
            }
    
        }
        oDiv.onmouseout = function(){
            oSpan.style.display = 'none';
            oBig.style.display = 'none';
            document.onmousemove = null;
    
        }
    
    
    
    
    
    </script>
    </body>
    </html>