JavaScript实现放大镜

最新推荐文章于 2024-09-14 19:44:09 发布

优优你别吃了

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量587

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45808183/article/details/121480412

版权

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个图片预览功能，当鼠标悬停在小图上时，显示一个带有半透明遮罩的大图，并允许用户通过拖动遮罩来平移查看大图的不同区域。该效果适用于图片浏览和展示场景，提供了良好的用户体验。

摘要由CSDN通过智能技术生成

效果图
在这里插入图片描述
html部分

  <div class="wrap">
        <!-- 小图与遮罩 -->
        <div id="small">
            <img src="./test.JPG" alt="">
            <div id="mark"></div>
        </div>
        <!-- 等比例放大的大图 -->
        <div id="big">
            <img src="./IMG_0151.JPG" alt="" id="bigimg">
        </div>
    </div>

css部分

      * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 1500px;
            margin: 100px auto;
        }

        #small {
            width: 400px;
            height: 400px;
            float: left;
            position: relative;
            margin-left: 30px;
        }

        #big {
            width: 450px;
            height: 450px;
            float: left;
            /* 超出取景框的部分隐藏 */
            overflow: hidden;
            margin-left: 20px;
            position: relative;
            display: none;
        }

        #bigimg {
            position: absolute;
            left: 0;
            top: 0;
        }

        #mark {
            width: 200px;
            height: 200px;
            background-color: pink;
            opacity: .5;
            position: absolute;
            left: 0;
            top: 0;
            /* 鼠标箭头样式 */
            cursor: move;
            display: none;
        }

js部分：

var small = document.querySelector('#small')
        var mask = document.querySelector('#mark')
        var big = document.querySelector('#big')
        var bigImg = document.querySelector('#bigimg')
        //1.鼠标进入显示遮罩层和大图
        small.addEventListener('mouseover', function () {
            mask.style.display = 'block'
            big.style.display = 'block'
        })
        small.addEventListener('mouseout', function () {
            mask.style.display = 'none'
            big.style.display = 'none'
        })
        //2.拖拽着遮罩层走
        small.addEventListener('mousemove', function (e) {
            //把鼠标的坐标作为遮罩层的中心
            var maskX = e.pageX - small.offsetLeft - mask.offsetWidth / 2;
            var maskY = e.pageY - small.offsetTop - mask.offsetHeight / 2;
            //判断边界条件
            if (maskX <= 0) {
                maskX = 0
            } else if (maskX >= small.offsetWidth - mask.offsetWidth) {
                maskX = small.offsetWidth - mask.offsetWidth
            }
            if (maskY <= 0) {
                maskY = 0
            } else if (maskY >= small.offsetHeight - mask.offsetHeight) {
                maskY = small.offsetHeight - mask.offsetHeight
            }
            mask.style.left = maskX + 'px'
            mask.style.top = maskY + 'px'
            //3. 大图移动的距离 = （遮罩层移动的距离/小图的距离）* 大图的距离
            var bigX = maskX / (small.offsetWidth - mask.offsetWidth) * (bigImg.offsetWidth - big.offsetWidth);
            var bigY = maskY / (small.offsetHeight - mask.offsetHeight) * (bigImg.offsetHeight - big.offsetHeight);
            bigImg.style.left = -bigX + 'px'
            bigImg.style.top = -bigY + 'px'
        })