js实现商品展示放大镜效果

最新推荐文章于 2023-06-24 12:34:15 发布

♛琉璃

最新推荐文章于 2023-06-24 12:34:15 发布

阅读量261

点赞数

分类专栏： JavaScript 文章标签： JavaScript 事件对象

本文链接：https://blog.csdn.net/qq_44419617/article/details/111565113

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

原理：左边一张小图，右边是一张大图（初始隐藏），当鼠标移入小图时出现放大镜（遮罩模块），同时大图（溢出隐藏）出现。移动鼠标时放大镜的移动距离与大图移动距离成比例，方向相反。放大镜与大图之间比例关系为：放大镜的left值/小图盒子的宽度=大图的left/大图盒子的宽度。

<!DOCTYPE html>
<html lang="en">

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

        #box,
        #bigBox {
            width: 350px;
            height: 350px;
            border: 1px solid red;
            position: relative;
            overflow: hidden;
        }

        #bigBox {
            left: 400px;
            top: -350px;
            display: none;
        }

        #bigBox img {
            /* display: block; */
            width: 700px;
            /* height: 700px; */
            position: absolute;
            left: 0;
            top: 0;
        }

        #mark {
            width: 175px;
            height: 175px;
            background: rgba(0, 0, 0, .3);
            position: absolute;
            left: 0;
            top: 0;
            cursor: move;
        }
    </style>
</head>

<body>
    <div id="box">
        <img src="img/iphone.jpg" alt="">
        <!--遮罩模块 即放大镜-->
        <!-- <div id="mark"></div> -->
    </div>
    <div id="bigBox">
        <img src="img/iphone_big.jpg" alt="">
    </div>

    <script>
        let box = document.getElementById('box');//小图盒子
        let bigBox = document.getElementById('bigBox');//大图盒子
        let img = bigBox.getElementsByTagName('img')[0];//大图
        let mark;//放大镜
        //鼠标滑入小图盒子，大盒子显示，放大镜显示
        box.onmouseenter = function () {
            //动态创建mark，然后把mark添加到box中
            mark = document.createElement('div');
            mark.id = 'mark';
            box.appendChild(mark);
            //让大盒子显示
            bigBox.style.display = 'block';
        };
        //放大镜跟随鼠标移动
        box.onmousemove = function (e) {
            //先求出当前mark主要移动的距离
            let left = e.clientX - box.offsetLeft - mark.offsetWidth / 2;
            let top = e.clientY - box.offsetTop - mark.offsetHeight / 2;
            //边界
            let maxW = box.offsetWidth - mark.offsetWidth;
            let maxH = box.offsetHeight - mark.offsetHeight;
            left = left <= 0 ? 0 : (left >= maxW ? maxW : left);
            top = top <= 0 ? 0 : (top >= maxH ? maxH : top);
            
            //把当前求出来的距离赋值给mark的left即可
            mark.style.left = left + 'px';
            mark.style.top = top + 'px';

            //大图的left根据公式得出，并且与放大镜的left符号相反
            //公式 mark.style.left/box.offsetWidth=img.style.left/bigBox.offsetWidth
            img.style.left = -2 * left + 'px';
            img.style.top = -2 * top + 'px';

        };
        //鼠标移出小图盒子，放大镜消失，大图盒子消失
        box.onmouseleave = function () {
            //当鼠标滑出的时候，让mark移除，让大盒子隐藏
            box.removeChild(mark);
            bigBox.style.display = 'none';
        };
    </script>
</body>

</html>

♛琉璃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现商品展示放大镜效果

原理：左边一张小图，右边是一张大图（初始隐藏），当鼠标移入小图时出现放大镜（遮罩模块），同时大图（溢出隐藏）出现。移动鼠标时放大镜的移动距离与大图移动距离成比例，方向相反。放大镜与大图之间比例关系为：放大镜的left值/小图盒子的宽度=大图的left/大图盒子的宽度。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"
复制链接

扫一扫