放大镜效果

Posted 2020-10-19 阿弥陀佛么么哒！

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了放大镜效果相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                width:430px;
                height:430px;
                overflow: hidden;
                position: relative;
                cursor: move;
            }
            #div1 div{
                width:150px;
                height: 150px;
                background-color: rgba(121,11,22,0.2);
                position:absolute;
                top:0;
                left: 0;
                display: none;
            }
            #div2{
                width:430px;
                height:430px;
                overflow: hidden;
                position: absolute;
                top:8px;
                left: 500px;
                display: none;
            }
            #div2 img{
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <img src="https://img.alicdn.com/imgextra/i2/724195866/TB2E8K1cl0kpuFjy1zdXXXuUVXa_!!724195866.jpg_430x430q90.jpg"/>
            <div id="moveDiv"></div>
        </div>
        <div id="div2">
            <img src="https://img.alicdn.com/imgextra/i1/724195866/TB2DMu6cgFkpuFjSspnXXb4qFXa_!!724195866.jpg" id="bigImg"/>
        </div>
    </body>
    <script type="text/javascript">
        var oDiv1 = document.getElementById(‘div1‘);
        var oDiv2 = document.getElementById(‘div2‘);
        var moveDiv = document.getElementById(‘moveDiv‘);
        var bigImg = document.getElementById(‘bigImg‘);
        oDiv1.onmouseenter = function(){
            moveDiv.style.display = ‘block‘;
            oDiv2.style.display = ‘block‘;
        }
        oDiv1.onmouseleave = function(){
            moveDiv.style.display = ‘none‘;
            oDiv2.style.display = ‘none‘;
        }
        oDiv1.onmousemove = function(ev){
            var event = ev||window.event;
            var T = event.clientY-oDiv1.offsetTop-moveDiv.offsetHeight/2;
            var L = event.clientX-oDiv1.offsetLeft-moveDiv.offsetWidth/2;
            
            
            //移动方块的位置范围限制
            if(T<0){
                T = 0;
            }
            if(T>oDiv1.offsetHeight-moveDiv.offsetHeight){
                T = oDiv1.offsetHeight-moveDiv.offsetHeight;
            }
            if(L<0){
                L = 0;
            }
            if(L>oDiv1.offsetWidth-moveDiv.offsetWidth){
                L = oDiv1.offsetWidth-moveDiv.offsetWidth;
            }
            moveDiv.style.top = T+‘px‘;
            moveDiv.style.left = L+‘px‘;
            
            //缩放比例
            var scaleX = L/(oDiv1.offsetWidth-moveDiv.offsetWidth);
            var scaleY = T/(oDiv1.offsetHeight-moveDiv.offsetHeight);
            
            console.log(scaleX);
            console.log(scaleY);
            bigImg.style.top = -scaleY*(bigImg.offsetHeight-oDiv2.offsetHeight)+‘px‘;
            bigImg.style.left = -scaleX*(bigImg.offsetWidth-oDiv2.offsetWidth)+‘px‘;
            
        }
        
    </script>
</html>

以上是关于放大镜效果的主要内容，如果未能解决你的问题，请参考以下文章