商品放大镜，仿淘宝/京东（ECMAscript）

最新推荐文章于 2022-04-07 09:19:21 发布

原创最新推荐文章于 2022-04-07 09:19:21 发布 · 362 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#web前端 #JavaScript #商品放大镜，仿淘宝/京东 #JS商品放大镜 #HTML5/CSS3

web前端专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一种通过两张相同比例的图片实现放大镜效果的方法。利用HTML、CSS和JavaScript技术，实现了鼠标悬停时小图区域放大的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

这里写图片描述

我们所看到的效果——鼠标放在小图上面有一个放大镜的效果
其实这都是假象，这个效果是用2个相同比例的图片做出来的
细则请看下文：

HTML代码

<body>
<div class="box" id="box">
    <div class="small"><!--小层-->
        <img src="images/small.png" width="350" alt=""/>
        <div class="mask"></div><!--遮挡层-->
    </div><!--小图-->
    <div class="big"><!--大层-->
        <img src="images/big.jpg" width="800" alt=""/><!--大图-->
    </div><!--大图-->
</div>

在html代码里面主要有四个模块——小图，遮挡层，大图，大图框；
小图默认默认是显示的，遮挡层是要我们鼠标经过事件触发的时候才会显示的
大图和大图框默认是隐藏的，且鼠标经过小图的时候按照小图的比例移动的

CSS代码：

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }

        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: move;
            display: none;
        }

        .small {
            position: relative;
        }
    </style>

我们可以看到在大图上面是有一个大图框的
大图框小于大图并且设置的 overflow: hidden; 这就是我们要的效果让大图只显示一部分
我们的遮挡层 mask 设置透明度和脱标注意子绝父相哦

JS代码：

<script>
    //获取需要的元素
    var box = my$("box");
    //获取小图div
    var small = box.children[0];
    //获取遮挡层
    var mask = small.children[1];
    //获取大图div
    var big = box.children[1];
    //获取大图
    var bigImg=big.children[0];
-----------------------分割线以上是获取元素--------------------------------------

    //鼠标进入显示遮挡层和大图
    box.onmouseover = function () {
        mask.style.display = "block";
        big.style.display = "block";
    };
    //鼠标离开隐藏遮挡层和大图
    box.onmouseout = function () {
        mask.style.display = "none";
        big.style.display = "none";
    };
    //鼠标移动 ---鼠标是在小层上移动
    small.onmousemove = function (e) {
        //鼠标此时的横纵区域的坐标
        //社会自遮挡层在鼠标中间显示
        var x = e.clientX-mask.offsetWidth/2;
        var y = e.clientY-mask.offsetHeight/2;
        //marginpx  的问题
        x=x-100;
        y=y-100;
        //横坐标的最小值
        x=x<0?0:x;
        //纵坐标的最小值
        y=y<0?0:y;
        //横坐标的最大值
        x=x>small.offsetWidth-mask.offsetWidth?small.offsetWidth-mask.offsetWidth:x;
        //纵坐标的最大值
        y=y>small.offsetHeight-mask.offsetHeight?small.offsetHeight-mask.offsetHeight:y;
        // console.log("x:"+x);
        //为遮挡层的top left赋值
        mask.style.left = x + "px";
        mask.style.top = y + "px";
        //遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离
        //大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离

        //大图的横向最大移动距离
        var maxX=bigImg.offsetWidth-big.offsetWidth;
        //大图的纵向最大移动距离
        var maxY=bigImg.offsetHeight-big.offsetHeight;

        //获取比例
        //大图的横向移动坐标
        var bigImgMoveX=x*maxX/(small.offsetWidth-mask.offsetWidth);
        //大图的纵向移动坐标
        var bigImgMoveY=y*maxX/(small.offsetWidth-mask.offsetWidth);

        //设置自图片移动
        bigImg.style.marginLeft=-bigImgMoveX+"px";
        bigImg.style.marginTop=-bigImgMoveY+"px";
    };

</script>

逻辑：

首先获取元素这个不谈，就是字面意思已用分割线隔开
首先为小图注册鼠标事件也就是 .onmouseover；让遮挡层显示还有大图框显示
下面就是让遮挡层mask 跟随鼠标了动起来了为遮挡层注册鼠标onmousemove 事件让mask 的top和left跟随鼠标的e.clientX/e.clientY 注意这的 X,Y要减去margin
下面就是mask 的可移动范围了我要控制它的可以的范围防止他跑出小图的范围这只x和y的值，我这里使用三元表达式来实现 ——也就是以下代码：

 //横坐标的最小值
        x=x<0?0:x;
        //纵坐标的最小值
        y=y<0?0:y;
        //横坐标的最大值
        x=x>small.offsetWidth-mask.offsetWidth?small.offsetWidth-mask.offsetWidth:x;
        //纵坐标的最大值
        y=y>small.offsetHeight-mask.offsetHeight?small.offsetHeight-mask.offsetHeight:y;

5 . 这里还有一个点就是要设置小图移动的距离和大图的移动距离相等，这里我们先求出比例，小图的移动方向和大图的移动方向是相反的也就是这个公式：
//遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离
//大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离
6 .随后把计算出来的值赋值给大图的marginTop和marginLeft 如下：

bigImg.style.marginLeft=-bigImgMoveX+"px";
bigImg.style.marginTop=-bigImgMoveY+"px";

具体看js代码注释比较详细