JS简单实现京东图片放大镜效果

效果图：
素材：
大图：
小图：
代码思路：
详见代码注释JS部分
代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 使用style修改样式 -->
    <style>
        .mbox {
            position: relative;
            width: 300px;
            height: 300px;
            background: url(s3.png) no-repeat;
            background-size: 300px 300px;
            border: 1px solid black;
        }

        .mask {
            display: none;
            position: absolute;
            height: 100px;
            width: 100px;
            background-color: orange;
            opacity: .4;
            cursor: move;
        }

        .xbox {
            display: none;
            position: absolute;
            width: 400px;
            height: 400px;
            left: 320px;
            border: 1px solid black;
            overflow: hidden;
        }

        .ximg {
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="mbox">
        <div class="xbox">
            <img src="big.jpg" class="ximg">
        </div>
        <div class="mask"></div>
    </div>
    <script>
        //mbox指小盒子，xbox指放大后所显示的大盒子，ximg指大盒子中的图片，mask指橙色的遮罩层
        var mbox = document.querySelector('.mbox');
        var xbox = document.querySelector('.xbox');
        var ximg = document.querySelector('.ximg');
        var mask = document.querySelector('.mask');
        //给mbox添加鼠标经过事件
        mbox.addEventListener('mouseover', function () {
            //当鼠标经过mbox时，mask和xbox显示出来
            mask.style.display = 'block';
            xbox.style.display = 'block';
            //给mbox添加鼠标移动事件
            mbox.addEventListener('mousemove', move);

            function move(e) {
                //计算鼠标在mbox内的坐标。为了让鼠标居于mask中心，再各减去mask的宽高一半
                var left = e.pageX - mbox.offsetLeft - mask.offsetWidth / 2;
                var top = e.pageY - mbox.offsetTop - mask.offsetHeight / 2;
                //计算显示比率，ximg最大移动距离/mask最大移动距离
                var ratio = (ximg.offsetWidth - xbox.offsetWidth) / (mbox.offsetWidth - mask.offsetWidth);
                //把left、top限制在mbox的范围中
                if (left <= 0) {
                    left = 0;
                } else if (left >= mbox.offsetWidth - mask.offsetWidth) {
                    left = mbox.offsetWidth - mask.offsetWidth;
                }
                if (top <= 0) {
                    top = 0;
                } else if (top >= mbox.offsetHeight - mask.offsetHeight) {
                    top = mbox.offsetHeight - mask.offsetHeight;
                }
                mask.style.left = left + 'px';
                mask.style.top = top + 'px';
                //mask的移动方向与ximg的移动方向刚刚好相反，试一下把 '-' 去掉即可明白。
                //且ximg移动距离为mask的ratio倍。
                ximg.style.left = '-' + left * ratio + 'px';
                ximg.style.top = '-' + top * ratio + 'px';
            }
        })
        //给mbox添加鼠标离开事件
        mbox.addEventListener('mouseout', function () {
            mask.style.display = 'none';
            xbox.style.display = 'none';
        })
    </script>
</body>

</html>
JS简单实现京东图片放大镜效果

猜你喜欢
