【JS】仿京东放大镜效果的实现

JavaScript

字数统计: 462阅读时长: 2 min

 2020/03/09   Share

这是JS学习到目前为止做的比较难的一个案例，主要的难点在于鼠标的偏移量与放大镜遮罩层的偏移量以及放大图的偏移量的换算。

效果展示

放大镜效果图

参考代码

HTML代码

<div class="box">
    <img src="../images/bright.jpg" alt="" class="bright">
    <div class="mask"></div>
    <div class="big">
        <img src="../images/bright.jpg" alt="" class="bigImg">
    </div>
</div>

CSS代码

.box {
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid #ddd;
    margin: 20px 0 0 20px;
}

.bright {
    width: 100%;
}

.mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background: #b9e4f5;
    border: 1px solid #ccc;
    /* 透明度 */
    opacity: .5;
    cursor: move;
}

.big {
    display: none;
    position: absolute;
    top: 0;
    left: 410px;
    width: 500px;
    height: 500px;
    background-color: pink;
    /* z-index: 999; */
    border: 1px solid #ccc;
    overflow: hidden;
}

.big img {
    position: absolute;
    top: 0;
    left: 0;
}

JS代码

window.addEventListener('load', function() {
    var box = document.querySelector('.box');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 1.鼠标经过 box 时，显示 mask 和 big ，离开时隐藏
    box.addEventListener('mouseover', function() {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    box.addEventListener('mouseout', function() {
            mask.style.display = 'none';
            big.style.display = 'none';
        })
        // 2.鼠标移动时，让黄色盒子 mask 跟着鼠标走
        // maskX 和 maskY 其实就是mask盒子的位移值
    box.addEventListener('mousemove', function(e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        var maskMaxWidth = box.offsetWidth - mask.offsetWidth;
        var maskMaxHeight = box.offsetHeight - mask.offsetHeight;
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMaxWidth) {
            maskX = maskMaxWidth;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMaxHeight) {
            maskY = maskMaxHeight;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';

        // 3.大图 big 的移动距离 = mask 的移动距离 * big 的最大移动距离 / mask 的最大移动距离
        var bigImg = document.querySelector('.bigImg');
        var bigMaxWidth = bigImg.offsetWidth - big.offsetWidth;
        var bigMaxHeight = bigImg.offsetHeight - big.offsetHeight;
        var bigX = maskX * bigMaxWidth / maskMaxWidth;
        var bigY = maskY * bigMaxHeight / maskMaxHeight;
        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    })
})

Author：oCodeHoney

Date：2020-3-9

Next Post

【BLOG】在博客中加入本地图片的方法
Previous Post

Hello Honey

CATALOG

1. 效果展示
2. 参考代码

