用原生js实现放大镜的功能

最新推荐文章于 2022-09-07 12:23:27 发布

bug开发工程师.

最新推荐文章于 2022-09-07 12:23:27 发布

阅读量2.9k

点赞数 4

文章标签： javascript html5 css3

本文链接：https://blog.csdn.net/kongge123456/article/details/104094009

版权

在这里插入图片描述
这是京东上面的放大镜功能的实例，首先说一下放大镜功能的组成结构
包括一张大图片，一张小图片，两个div用来实现显示部分的内容；

基本的html样式：
在这里插入图片描述
从html中可以看到big这个div包含一个bigimg的子图片
previewimg包含一个名叫mask的子div 这非常重要；

下面是基本的css样式：

.preview_wrap {
    width: 400px;
    height: 590px;
}

.preview_img {
    position: relative;
    height: 398px;
    border: 1px solid #ccc;
}

.mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background: #FEDE4F;
    /*更改遮罩版的半透明央视*/
    opacity: .5;
    border: 1px solid #ccc;
    cursor: move;
}

.big {
    display: none;
    position: absolute;
    left: 410px;
    top: 0;
    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部分：
其中js部分的构建过程为
1、显示隐藏遮板和大图片
2、使遮板跟随鼠标移动
3、限制遮板的移动范围
4、实现大图片跟随遮板进行移动
具体的js源码如下：

window.addEventListener('load',function(){
    var preview_img =  document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 当我们鼠标经过perview-img时， 就显示和隐藏mark遮挡层和big大盒子
    preview_img.addEventListener('mouseover',function(){
        mask.style.display = 'block'
        big.style.display = 'block'
    })

    preview_img.addEventListener('mouseout',function(){
        mask.style.display = 'none'
        big.style.display = 'none'
    })
    // 实现鼠标移动半透明遮板移动的效果
    preview_img.addEventListener('mousemove',function(e){
        // 获得鼠标在盒子中的位置
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x);
        // console.log(y);
       
        // 实现限制盒子移动的
        var maskx = x-mask.offsetWidth/2;
        var masky = y-mask.offsetWidth/2;

        if (maskx < 0) {
            maskx = 0;
        }
        else if (maskx > preview_img.offsetWidth - mask.offsetWidth){
            maskx = preview_img.offsetWidth - mask.offsetWidth;
        }

        if (masky < 0) {
            masky = 0;
        }
        else if (masky > preview_img.offsetHeight - mask.offsetHeight){
            masky = preview_img.offsetHeight - mask.offsetHeight;
        }


        mask.style.left = maskx + 'px';
        mask.style.top = masky + 'px';

        // 设置大的img跟着小的img进行移动，根据公式
        //小的坐标/小的最大移动坐标 =  大的坐标/大的最大移动坐标

        // maxmaskx 为小的最大移动坐标
        var MAXmaskx = preview_img.offsetWidth - mask.offsetWidth;
        var MAXmasky = preview_img.offsetHeight - mask.offsetHeight
        // 然后获取到bigimg
        var bigIMg = document.querySelector('.bigImg');
        var MAXbigx = bigIMg.offsetWidth - big.offsetWidth;
        var MAXbigy = bigIMg.offsetHeight - big.offsetWidth;
        var bigx = maskx*MAXbigx/MAXmaskx;
        var bigy = masky*MAXbigy/MAXmasky;
        bigIMg.style.left = -bigx+'px';
        bigIMg.style.top = -bigy+'px';

    })


})