其他分享
首页 > 其他分享> > js实现放大镜

js实现放大镜

作者：互联网

效果图

在这里插入图片描述

实现原理

借助宽高等比例放大的两张图片，结合js中鼠标偏移量、元素偏移量、元素自身宽高等属性完成；
左侧遮罩移动Xpx,右侧大图移动X*倍数px；其余部分就是用小学数学算一下就OK了。

完整事例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>放大镜</title>
    <meta charset="utf-8" />
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        .wrap {
            height: 480px;
            margin: 30px;
        }

        #small {
            width: 300px;
            height: 480px;
            position: relative;
        }

        #small img {
            width: 100%;
            height: 100%;
        }

        .wrap div {
            float: left;
            margin-right: 10px;
        }

        #big {
            width: 300px;
            height: 480px;
            overflow: hidden;
            position: relative;
            display: none;
        }

        #look_girl {
            position: absolute;
            left: 0px;
            top: 0px;
        }

        #move {
            width: 100px;
            height: 100px;
            background: #000;
            opacity: 0.5;
            position: absolute;
            display: none;
            left: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div id="small">
            <img src="https://blog-static.cnblogs.com/files/blogs/249892/girl.gif" />
            <p id="move"></p>
        </div>
        <div id="big">
            <img src="https://blog-static.cnblogs.com/files/blogs/249892/girl.gif" id="look_girl" />
        </div>
    </div>
    <script type="text/javascript">
        var move = document.getElementById('move');
        var small = document.getElementById('small');
        var big = document.getElementById('big');
        var look_girl = document.getElementById('look_girl');
        small.onmousemove = function (event) {
            event = event || window.event;
            this.style.cursor = 'move';
            // 计算move移动块的left值
            var move_left = event.clientX - this.offsetLeft - move.offsetWidth / 2;
            // 计算move移动块的top值
            var move_top = event.clientY - this.offsetTop - move.offsetHeight / 2;

            // 超出左边界赋值为0
            move_left = move_left < 0 ? 0 : move_left;
            // 超出右边界赋值为盒子宽度-移动块的宽度
            move_left = move_left > this.offsetWidth - move.offsetWidth ? this.offsetWidth - move.offsetWidth : move_left;
            // 超出上边界赋值为0
            move_top = move_top < 0 ? 0 : move_top;
            // 超出下边界赋值为盒子高度-移动块高度
            move_top = move_top > this.offsetHeight - move.offsetHeight ? this.offsetHeight - move.offsetHeight : move_top;
            // 修改移动块left、top值
            move.style.left = move_left + 'px';
            move.style.top = move_top + 'px';

            /*
                计算图片需要移动的坐标

                距离左边left    图片宽度      盒子宽度          距离左边left    图片宽度           盒子宽度
                big_x/(look_girl.offsetWidth-big.offsetWidth) = move_left/(small.offsetWidth-move.offsetWidth);

                big_y/(look_girl.offsetHeight-big.offsetHeight) = move_top/(small.offsetHeight-move.offsetHeight);

            */

            var big_x = (move_left / (small.offsetWidth - move.offsetWidth)) * (look_girl.offsetWidth - big.offsetWidth);
            var big_y = (move_top / (small.offsetHeight - move.offsetHeight)) * (look_girl.offsetHeight - big.offsetHeight);
            // 修改图片定位
            look_girl.style.left = -big_x + 'px';
            look_girl.style.top = -big_y + 'px';
        };

        small.onmouseover = function () {
            move.style.display = 'block';
            big.style.display = 'block';
        };

        small.onmouseout = function () {
            move.style.display = 'none';
            big.style.display = 'none';
        };
    </script>
</body>

</html>

总结

标签：放大镜,big,top,move,js,实现,offsetHeight,offsetWidth,left
来源： https://blog.csdn.net/x550392236/article/details/121508654