JavaScript系列---【js动画特效--放大镜案例】 

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            width: 350px;
            height: 350px;
            border: 1px solid gray;
            background: url(img/xiao.jpg);
            position: relative;
        }

        .move {
            width: 150px;
            height: 150px;
            background: orange;
            opacity: 0.5;
            position: absolute;
            top: 0;
            left: 0;
        }

        .right {
            width: 400px;
            height: 400px;
            background: url(img/da.jpg);
            position: absolute;
            left: 400px;
            top: 0;
            border: 1px solid gray;
        }

        .move,
        .right {
            /* 默认隐藏 */
            display: none;
        }
    </style>
</head>

<body>
    <div class="left">
        <div class="move"></div>
    </div>
    <div class="right"></div>

    <script>
        var left = document.querySelector('.left');
        var right = document.querySelector('.right');
        var move = document.querySelector('.move');
        // 计算比例(大图未走过的距离 / 小图未走过的距离)
        var rate = 400 / 200;

        // 鼠标进入left, move和right显示出来
        left.onmouseenter = function () {
            move.style.display = 'block';
            right.style.display = 'block';

            left.onmousemove = function (e) {
                e = e || window.event;

                // 鼠标的位置保持在move的中心
                var moveLeft = e.clientX - move.offsetWidth / 2;
                var moveTop = e.clientY - move.offsetHeight / 2;
                // 限制范围
                if (moveLeft <= 0) moveLeft = 0
                if (moveTop <= 0) moveTop = 0
                if (moveLeft >= left.clientWidth - move.offsetWidth) moveLeft = left.clientWidth - move.offsetWidth;
                if (moveTop >= left.clientHeight - move.offsetHeight) moveTop = left.clientHeight - move.offsetHeight;
                move.style.left = moveLeft + 'px';
                move.style.top = moveTop + 'px';

                // right背景图片位置跟随move的移动修改
                right.style.backgroundPosition = -moveLeft * rate + 'px ' + (-moveTop * rate) + 'px';
            }
        }

        // 鼠标离开left, move和right隐藏
        left.onmouseleave = function () {
            move.style.display = 'none';
            right.style.display = 'none';
        }
    </script>
</body>

</html>

 

posted on 2021-03-29 22:11  码农小小海  阅读(119)  评论(0)    收藏  举报

导航