商品放大镜案例

最新推荐文章于 2024-04-19 21:06:08 发布

江南时雨

最新推荐文章于 2024-04-19 21:06:08 发布

阅读量156

点赞数

分类专栏： JS 小例子

本文链接：https://blog.csdn.net/qq_45441117/article/details/114554202

版权

JS 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

小例子

9 篇文章 0 订阅

订阅专栏

商品放大镜案例

当鼠标放在旁边的小商品图片上时可以看到一个相同商品的大图

一、实现效果：

在这里插入图片描述

二、步骤：

一、当鼠标经过 preview_img 就是显示和隐藏 mask遮挡层和big大盒子
（1）.分为鼠标经过（mouseover）和鼠标离开事件（mouseout）

二、鼠标移动的时候，让黄色的盒子跟随鼠标移动
     （1）.计算鼠标在盒子内部的坐标
     （2）.再用鼠标在盒子里的坐标减去黄色盒子大小的一半，让鼠标位于黄色盒子中间。
     （3）在将鼠标的坐标赋给黄色盒子时先判断黄色盒子坐标是否会超出边框

三、根据黄色盒子在小图片里移动的坐标等比例的移动大图片的坐标，实现实时放大的效果
（1）.大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
（2）.因为遮挡层和大图移动相反，所以大图的坐标要加 ‘-’ 号

三、html和css部分

<style>
        .preview_img {
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
        }
        
        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            background-color: #fede4f;
            border: 1px solid #ccc;
            opacity: .5;
            cursor: move;
        }
        
        .big {
            display: none;
            position: absolute;
            top: 0;
            left: 410px;
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            overflow: hidden;
        }
        
        .bigImg {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    <script src="js/detail.js"></script>
</head>

<body>
    <div class="preview_img">
        <img src="upload/s3.png" alt="">
        <div class="mask"></div>
        <div class="big">
            <img src="upload/big.jpg" alt="" class="bigImg">
        </div>
    </div>
</body>

四、js部分

window.addEventListener('load', function() {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    //1.当鼠标经过 preview_img 就是显示和隐藏 mask遮挡层和big大盒子

    preview_img.addEventListener('mouseover', function() {
            mask.style.display = 'block';
            big.style.display = 'block';
        })
        // 鼠标离开
    preview_img.addEventListener('mouseout', function() {
        mask.style.display = 'none';
        big.style.display = 'none';
    })

    // 2.鼠标移动的时候，让黄色的盒子跟随鼠标移动
    preview_img.addEventListener('mousemove', function(e) {
        // 先计算出鼠标在盒子内的坐标
        var x = e.pageX - preview_img.offsetLeft;
        var y = e.pageY - preview_img.offsetTop;
        // console.log(x + ',' + y);
        // console.log(preview_img.offsetLeft);
        // (2) 减去 黄色盒子大小的一半，让鼠标处于盒子中间
        // （3） mask 移动的距离
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // （4） 如果 x 坐标小于0 就让它停在 0 的位置
        // 遮挡层的最大距离 以左边框为标准
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        if (maskX <= 0) { //不让黄色盒子离开左边框
            maskX = 0;
        } else if (maskX >= maskMax) { // 不让黄色盒子离开有边框
            maskX = maskMax;
        }
        if (maskY <= 0) { //不让黄色盒子离开上边框
            maskY = 0;
        } else if (maskY >= maskMax) { //不让黄色盒子离开先边框
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px'; // 这里记得带单位，offsetWidth获得的宽度不带单位
        mask.style.top = maskY + 'px';
        // 3.大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        // 大图
        var bigImg = document.querySelector('.bigImg');
        // 大图片最大移动距离
        var bigMax = bigImg.offsetWidth - big.offsetWidth;
        // 大图片的移动距离 X Y
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        // 因为遮挡层和大图移动相反， 所以要加 ‘-’ 号
        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    })
})

五、实现商品放大镜需要注意的一些点：

1. 要添加判断条件，防止充当放大镜的黄色盒子超出边框

2. 要注意settoffWidth获得的元素宽度是不带单位的，所以一定要记得单独带上单位。

3. 如何让大图片随着黄色盒子（遮挡层）一起移动呢？一个公式：
遮挡层移动距离 / 遮挡层最大移动距离 = 大图片移动距离 / 大图片最大移动距离。这样就可以实现大图片随着遮挡层等比例在对应的盒子里面移动。另外：最大移动距离就是图片左边框和盒子的左边框的距离

4. 最后因为遮挡层的移动与大图片相反，所以大图片的坐标要带负号。

江南时雨

关注

0
点赞
踩
0

收藏

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

商品放大镜案例当鼠标放在旁边的小商品图片上时可以看到一个相同商品的大图一、实现效果：二、步骤：一、当鼠标经过 preview_img 就是显示和隐藏 mask遮挡层和big大盒子     （1）.分为鼠标经过（mouseover）和鼠标离开事件（mouseout）二、鼠标移动的时候，让黄色的盒子跟随鼠标移动     （1）.计算鼠标在盒子内部的坐标   &nbs
复制链接

扫一扫

专栏目录