js 仿京东放大镜

￡神魔★判官ぃ 2021-08-13 11:41 367阅读 0赞

功能模块

1.  整个案例可以分为三个功能模块
2.  鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子功能
3.  黄色的遮挡层跟随鼠标功能。
4.  移动黄色遮挡层，大图片跟随移动功能。

案例分析

1.  黄色的遮挡层跟随鼠标功能。
2.  把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。
3.  首先是获得鼠标在盒子的坐标。
4.  之后把数值给遮挡层做为left 和top值。
5.  此时用到鼠标移动事件，但是还是在小图片盒子内移动。
6.  发现，遮挡层位置不对，需要再减去盒子自身高度和宽度的一半。
7.  遮挡层不能超出小图片盒子范围。
8.  如果小于零，就把坐标设置为0
9.  如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
10. 遮挡层的最大移动距离：小图片盒子宽度 减去 遮挡层盒子宽度

html代码

<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>

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) {
            // (1). 先计算出鼠标在盒子内的坐标
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            // console.log(x, y);
            // (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了
            // (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';
            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';
    
        })
    
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，367人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS 图片放大镜

需求： 1.小遮罩可以随鼠标在小盒子上移动 2.遮罩层有自己的移动范围 3.鼠标在遮罩层的

小灰灰/ 2023年01月09日 15:56/ 0 赞/ 139 阅读

相关高仿京东APP

最近在网上找了一个关于京东网站的源码，链接地址： [京东高仿App下载][App] 发现其中有几个亮点：一，用动画代替进度条；二、对Tabhost加载Act

逃离我推掉我的手/ 2022年08月21日 10:48/ 0 赞/ 124 阅读

相关 js_图片放大镜

使用JavaScript语法对鼠标经过的地方进行放大处理，它和上一篇截图一样都用到了clip:rect(top right bottom left);具体代码如下：

深碍√TFBOYSˉ_/ 2022年08月04日 05:25/ 0 赞/ 246 阅读

相关 js简单放大镜

制作类似淘宝上面的放大镜，需要一张小图，一张大图。效果如下 ![Center][] <!DOCTYPE html> <html lang="en">

秒速五厘米/ 2022年06月09日 13:23/ 0 赞/ 183 阅读

相关仿淘宝的放大镜效果

概述主要介绍一下淘宝的放大镜效果是如何实现的，相信很多同学们对这个并不陌生。这个看似感觉很复杂的小功能，实际上原理却是非常的简单详细代码下载：[http:

浅浅的花香味﹌/ 2022年05月31日 11:17/ 0 赞/ 255 阅读

相关原生js模仿京东图片放大镜效果

实现放大镜效果，是需要两张图片，记得两张图片的比例要保持一致哦嗯，挺简单的，所以直接上代码喽，有不懂的可以评论区留言哦 <!DOCTYPE html> <

本是古典何须时尚/ 2022年05月29日 12:21/ 0 赞/ 212 阅读

相关京东淘宝放大镜

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

男娘i/ 2022年03月15日 00:14/ 0 赞/ 276 阅读

相关 js原生淘宝京东宝贝放大镜效果

js实现商城放大镜效果效果： > 鼠标放上去会有半透明遮罩、右边会有大图片局部图。 > 鼠标移动时右边的大图片也会局部移动。 `技术点`： `Even

不念不忘少年蓝@/ 2022年01月07日 20:17/ 0 赞/ 264 阅读

相关 vue仿京东放大镜加商品缩略图轮播组件

> 以下是最终的vue版本,光滑流畅,99%还原京东放大镜甚至更好,不会出现多次操作会变卡的问题 1.vue版本 6/23日更新，处理图片尺寸过小无法通过拖动实现放大移

淡淡的烟草味﹌/ 2021年09月24日 11:10/ 0 赞/ 471 阅读

相关 js 仿京东放大镜

功能模块 1. 整个案例可以分为三个功能模块 2. 鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能 3. 黄色的遮挡层跟随鼠标功能。 4.

￡神魔★判官ぃ/ 2021年08月13日 11:41/ 0 赞/ 368 阅读