JS练习二：放大镜效果的实现

最新推荐文章于 2022-07-01 11:46:32 发布

wind皮皮

最新推荐文章于 2022-07-01 11:46:32 发布

阅读量265

点赞数

文章标签： css html js javascript

本文链接：https://blog.csdn.net/langyixuan/article/details/106062203

版权

简单放大镜效果的实现
在这里插入图片描述鼠标放在小图上时，在小图上显示遮罩层和右边放大效果的图片，根据鼠标的移动，可查看想要放大的部位。
代码实现：
HTML+CSS

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜效果</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: black;
        }

        .box {
            width: 237px;
            height: 306px;
            position: relative;
            margin: 100px;
            border: 1px solid #ccc;
        }

        .small-img {
            width: 237px;
        }

        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(255, 230, 0, 0.3);
            width: 150px;
            height: 150px;
            cursor: move;
        }

        .big {
            display: none;
            position: absolute;
            top: 0;
            left: 320px;
            width: 450px;
            height: 581px;
            border: 1px solid #ccc;
            overflow: hidden;
        }

        .big-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 800px;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="images/106.jpg" class="small-img">
        <div class="mask"></div>
        <div class="big">
            <img src="images/106.jpg" class="big-img">
        </div>
    </div>
</body>

JS代码：

window.addEventListener('load', function () {
            var box = document.querySelector('.box');
            var mask = document.querySelector('.mask');
            var big = document.querySelector('.big');
            var small = document.querySelector('.small-img');
            //1.鼠标放在小图上时显示mask和大图
            box.addEventListener('mouseover', function () {
                big.style.display = 'block';
                mask.style.display = 'block';
            })
            // 2.鼠标离开小图时隐藏mask和大图
            box.addEventListener('mouseout', function () {
                big.style.display = 'none';
                mask.style.display = 'none';
            })
            // 3.获得鼠标在小图上的位置
            box.addEventListener('mousemove', function (e) {
                // (1)获得鼠标在盒子内的坐标
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                console.log(x, y);
                
                // （2）用鼠标在盒子内的坐标减去mask大小的一半就会让鼠标在mask 的中心拖动mask移动
                var maskX = x - mask.offsetWidth / 2;
                var maskY = y - mask.offsetHeight / 2;

                // (3)为了让mask的移动范围不能超过box，要加上判断条件
                if (maskX <= 0) {
                    maskX = 0;
                } else if (maskX >= box.offsetWidth - mask.offsetWidth) {
                    maskX = box.offsetWidth - mask.offsetWidth
                }
                if (maskY <= 0) {
                    maskY = 0;
                } else if (maskY >= box.offsetHeight - mask.offsetHeight) {
                    maskY = box.offsetHeight - mask.offsetHeight;
                }
                mask.style.left = maskX + 'px';
                mask.style.top = maskY + 'px';

                // (4)移动mask遮罩层，大图片跟着一起移动
                // 核心：大图移动距离公式
                // mask移动的距离 / mask可以移动的最大距离 = 大图移动的距离 / 大图可以移动的最大距离
                // mask可以移动的最大距离：
                maxMaskX = box.offsetWidth - mask.offsetWidth;
                maxMaskY = box.offsetHeight - mask.offsetHeight;
                var bimg = document.querySelector('.big-img');
                //大图片的最大移动距离
                var bigMaxX = big.offsetWidth - bimg.offsetWidth;
                var bigMaxY = big.offsetHeight - bimg.offsetHeight;
                // 大图片的移动距离
                var bigX = maskX * bigMaxX / maxMaskX;
                var bigY = maskY * bigMaxY / maxMaskY;
                bimg.style.left = bigX + 'px';
                bimg.style.top = bigY + 'px';
            })
        })
    </script>

wind皮皮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS练习二：放大镜效果的实现

简单放大镜效果的实现鼠标放在小图上时，在小图上显示遮罩层和右边放大效果的图片，根据鼠标的移动，可查看想要放大的部位。代码实现：HTML+CSS<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>放大镜效果</title> <style>
复制链接

扫一扫