JS实现放大镜效果案例

最新推荐文章于 2024-01-29 23:55:28 发布

m0_58188859

最新推荐文章于 2024-01-29 23:55:28 发布

阅读量622

点赞数 1

文章标签： javascript css3 开发语言

本文链接：https://blog.csdn.net/m0_58188859/article/details/121235954

版权

样式思路放大镜：小图大图遮罩层

JS思路：第一步：获取小盒子元素节点；获取遮罩元素节点

遮罩移动操作：

第二步：为小盒子绑定鼠标移动事件，

第三步：因为是遮罩在小盒子里随着鼠标移动，所以为小盒子加上相对定位，为遮罩加上绝对定位

第四步：计算遮罩的移动距离，即遮罩的偏移量

e.pageX - 遮罩层宽度的一半 - 小盒子的左侧偏移量

e.pageY - 遮罩层高度的一半 - 小盒子的上侧偏移量

第五步：求最大边界值 max_left 和max_height 小盒子的宽-遮罩层的宽

第六步：判断边界，即判断遮罩所能移动距离的范围

左右边界：0 ~ max_left;

上下边界：0 ~ max_top

第七步：给遮罩赋值，将所得的偏移量赋给遮罩的left和top,记得加px

然后默认情况下遮罩隐藏，

放大镜操作：

第八步：获取大图片的元素节点；

第九步：让大图片在大盒子里移动，要给大图片加绝对定位，给大盒子加相对定位

第十步：计算大图片与小图片的比例，因为小图片的宽与小盒子的宽一样，所以可用小盒子的宽

为什么计算比例，怎样计算比例：

因为遮罩在小盒子里移动时，相应的大图片也应该在大盒子里移动，达到同步，才能实现放大镜效果

计算比例：遮罩在小盒子的移动距离 / 小盒子的宽 = 大图片的移动距离 / 大盒子的宽

因为要求的是比例，所以可以直接让大图片的宽 / 小盒子的宽或小图片的宽

第十一步：让遮罩的距离乘以比例就得出在大图片上应移动的距离，取负值

因为在小图片里，遮罩是向右移动，在大图片里，大盒子不动，应让大图片向左移动

第十二步：将移动距离赋值给大图片，大图片默认情况下隐藏

第十三步：为小盒子绑定鼠标进入事件mouseenter

当鼠标移入遮罩和大图片都显示

第十四步：为小盒子绑定鼠标离开事件mouseleave

当鼠标移入遮罩和大图片都隐藏

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .wrap {

            width: 1226px;

            margin: 100px auto;

        }

        #small {

            width: 350px;

            height: 350px;

            float: left;

            position: relative;

        }

        #big {

            width: 500px;

            height: 500px;

            /* margin-left: 10px; */

            float: left;

            overflow: hidden;

            position: relative;

            display: none;

        }

        #mark {

            width: 220px;

            height: 220px;

            background-color: #fff;

            position: absolute;

            left: 0;

            top: 0;

            opacity: .5;

            cursor: move;

            display: none;

        }

        #big_img {

            position: absolute;

            top: 0;

            left: 0;

        }

    </style>

</head>



<body>

    <div class="wrap">

        <div id="small">

            <img src="./img/s.jpg" alt="">

            <div id="mark"></div>

        </div>

        <div id="big">

            <img src="./img/b.jpg" id="big_img">

        </div>

    </div>

    <script>

        var small = document.getElementById("small");

        var mark = document.getElementById("mark");

        var big_img = document.getElementById("big_img");

        small.onmousemove = function (e) {

            var x = e.pageX - mark.offsetWidth / 2 - small.offsetLeft;

            var y = e.pageY - mark.offsetHeight / 2 - small.offsetTop;

            var max_left = small.offsetWidth - mark.offsetWidth;

            var max_top = small.offsetHeight - mark.offsetHeight;

            if (x < 0) {

                x = 0

            } else if (x > max_left) {

                x = max_left

            }



            //判断上下边界

            if (y < 0) {

                y = 0

            } else if (y > max_top) {

                y = max_top

            }

            mark.style.left = x + "px";

            mark.style.top = y + "px";



            var rate = big_img.offsetWidth / small.offsetWidth;

            var imgLeft = -x * rate;

            var imgTop = -y * rate;

            big_img.style.left = imgLeft + "px";

            big_img.style.top = imgTop + "px";

        }

        small.onmouseenter = function () {

            mark.style.display = "block";

            big.style.display = "block";

        }

        small.onmouseleave = function () {

            mark.style.display = "none";

            big.style.display = "none";

        }

    </script>

</body>

</html>

m0_58188859

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现放大镜效果案例

样式思路放大镜：小图大图遮罩层JS思路：第一步：获取小盒子元素节点；获取遮罩元素节点遮罩移动操作：第二步：为小盒子绑定鼠标移动事件，第三步：因为是遮罩在小盒子里随着鼠标移动，所以为小盒子加上相对定位，为遮罩加上绝对定位第四步：计算遮罩的移动距离，即遮罩的偏移量 e.pageX - 遮罩层宽度的一半 - 小盒子...
复制链接

扫一扫