放大镜

最新推荐文章于 2021-07-31 14:00:40 发布

萌新菜鸟前端

最新推荐文章于 2021-07-31 14:00:40 发布

阅读量141

点赞数

分类专栏： JS 文章标签：个人练习案例

本文链接：https://blog.csdn.net/zh_hunan/article/details/102749518

版权

JS 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

放大镜的实现

思路

1、在鼠标经过产品图时遮盖层和大图都显示，鼠标移开时遮盖层和大图都隐藏。
2、鼠标在产品图内移动时把鼠标在产品图内的坐标给遮盖层并将鼠标定到遮盖层中央
3、把遮盖层的移动距离以一个比例给大图

代码

    <style>
        .preview_wrap_img {
            position: relative;
            cursor: move;
            height: 398px;
            width: 398px;
            border: 1px solid #ccc;
        }

        .msk {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: #FEDE4F;
            opacity: .3;
        }

        .big {
            display: none;
            position: absolute;
            top: 0;
            left: 420px;
            width: 500px;
            height: 500px;
            overflow: hidden;
        }
        .big img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="preview_wrap_img">
        <img src="img/s3.png" alt="">
        <div class="msk"></div>
    </div>
    <div class="big">
        <img src="img/big.jpg" alt="">
    </div>

    <script>
        // 获取元素
        var pwi = document.querySelector('.preview_wrap_img');
        var msk = document.querySelector('.msk');
        var big = document.querySelector('.big');
        var im = document.querySelector('.big img')
        // 鼠标经过时显示
        pwi.addEventListener('mouseover', function () {
            msk.style.display = 'block';
            big.style.display = 'block';
        })
        // 鼠标经过时隐藏
        pwi.addEventListener('mouseout', function () {
            msk.style.display = 'none';
            big.style.display = 'none';
        })
        // 鼠标在产品图内移动时让黄色的盒子跟着鼠标来走
        pwi.addEventListener('mousemove',function(e) {
            // 获取鼠标在产品图内的坐标
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            // 将鼠标的坐标值给遮盖层并将鼠标定到遮盖层的中心
            var mskx = x - msk.offsetWidth / 2;
            var msky = y - msk.offsetHeight / 2;
            // 遮盖层在产品图内移动的最大值
            var maxX = pwi.offsetWidth - msk.offsetWidth;
            var maxY = pwi.offsetHeight - msk.offsetHeight;
            // 大图片的最大移动距离
            var maxX1 = big.offsetWidth - im.offsetWidth;
            var maxY1 = big.offsetHeight - im.offsetHeight;
            // 计算相对应产品图移动时的大图的移动距离
            var maxLeft = mskx / maxX *  maxX1;
            var maxTop = msky / maxY * maxY1;
            // 将计算出来的值给大图
            im.style.top = maxTop + 'px';
            im.style.left = maxLeft + 'px';
            // 遮挡层能移动的距离
            if (mskx <= 0) {
                mskx = 0;
            } else if (mskx >= maxX ) {
                mskx = maxX;
            }
            if (msky <= 0) {
                msky = 0;
            } else if (msky >= maxY) {
                msky = maxY;
            }
            // 遮挡层能移动的距离赋值给遮挡层
            msk.style.top = msky + 'px';
            msk.style.left = mskx + 'px';

        })
    </script>
</body>

萌新菜鸟前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
放大镜

放大镜的实现思路1、在鼠标经过产品图时遮盖层和大图都显示，鼠标移开时遮盖层和大图都隐藏。2、鼠标在产品图内移动时把鼠标在产品图内的坐标给遮盖层并将鼠标定到遮盖层中央3、把遮盖层的移动距离以一个比例给大图代码 <style> .preview_wrap_img { position: relative; c...
复制链接

扫一扫