放大镜效果

最新推荐文章于 2023-02-06 23:42:15 发布

SpongeBob_Yu

最新推荐文章于 2023-02-06 23:42:15 发布

阅读量266

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/SpongeBob_Yu/article/details/124618901

版权

实现放大镜效果代码如下：

html

    <div class="smallbox">
        <img src="images/放大镜/1.png" alt="" class="small">
        <div class="mask"></div>
        <div class="big">
            <img src="images/放大镜/1big.png" alt="" class="bigImg">
        </div>
    </div>

css：

      .smallbox{
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
        }
        .smallbox .small{
            width: 400px;
        }
        .mask{
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            width: 300px;
            height: 300px;
            background-color: #000 ;
            opacity: .5;
        }
        .smallbox .big{
            position: absolute;
            left: 410px;
            top: 0;
            display: none;
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            overflow: hidden;
        }
        .big .bigImg{
            position: absolute;
            top: 0;
            left: 0;
        }

js：

        // 获取元素
        var smallbox=document.querySelector('.smallbox');
        var mask=document.querySelector('.mask');
        var big=document.querySelector('.big');
        var maskX=
        // 鼠标经过smallbox，遮挡层和big显示
        smallbox.addEventListener('mouseover',function(e){
            mask.style.display='block';
            big.style.display='block';
        })
        // 鼠标离开smallbox，遮挡层和big隐藏
        smallbox.addEventListener('mouseout',function(){
            mask.style.display='none';
            big.style.display='none';
        })
        
        smallbox.addEventListener('mousemove',function(e){
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            // mask移动的距离
            maskX=x - mask.offsetWidth / 2;
            maskY=y - mask.offsetHeight / 2;
            // 遮挡层不出smallbox
            maskMaxW = smallbox.offsetWidth - mask.offsetWidth;
            maskMaxH = smallbox.offsetHeight - mask.offsetHeight;
            if(maskX <= 0){
                maskX = 0;
            }else if(maskX >= maskMaxW){
                maskX = maskMaxW;
            }
            if(maskY <= 0){
                maskY = 0;
            }else if(maskY >= maskMaxH){
                maskY = maskMaxH;
            }
            mask.style.left = maskX + 'px';
            mask.style.top = maskY + 'px';
            // 大图片的移动距离 = 遮挡层移动距离 *大图片最大移动距离 / 遮挡层最大移动距离
            var bigImg = document.querySelector('.bigImg');
            var small = document.querySelector('.small');
            // 大图片的最大移动距离
            var bigMaxW = bigImg.offsetWidth - big.offsetWidth;
            var bigMaxH = bigImg.offsetHeight - big.offsetHeight;
            // 大图片的移动距离
            var bigW = maskX * bigMaxW / maskMaxW;
            var bigH = maskY * bigMaxH / maskMaxH;
            // 大图移动
            bigImg.style.left = -bigW + 'px';
            bigImg.style.top = -bigH + 'px';
            // 鼠标移出small隐藏mask和big
            if(e.pageX < this.offsetLeft || e.pageX > this.offsetLeft+this.offsetWidth || e.pageY < this.offsetTop || e.pageY > this.offsetTop+this.offsetHeight){
                mask.style.display='none';
                big.style.display='none';
            }

        })

结果：

放大镜效果