JavaScript（十二）淘宝图片放大镜案例-优快云博客

本文链接：https://blog.youkuaiyun.com/We_jia/article/details/85332557

本文详细介绍了一种在电商网站中实现产品放大镜效果的方法，通过JavaScript操作DOM元素，响应鼠标移动事件，实现图片局部放大及平滑过渡，提供用户更佳的购物体验。

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

在电商网站中，产品的细节是必不可少的，这就需要产品的放大镜效果,那我们就来看一下放大镜是怎么做出来的呢？同时这也是我做的第一个JavaScript的小案例嘻嘻。

先看一下效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            width: 350px;
            height: 533px;
            margin: 0 auto;
        }

        .top {
            position: relative;
            width: 350px;
            height: 449px;
        }

        .ceng {
            position: absolute;
            width: 236.25px;
            height: 236.31px;
            z-index: 1;
            background: url("./image/1.png");
            background-size: 3px 3px;
        }

        .middleimage {
            width: 100%;
            height: 100%;
            vertical-align: middle;
        }

        .smallimage {
            width: 300px;
            height: 64px;
            margin-top: 20px;
            margin-left: 25px;
        }

        .small {
            float: left;
            width: 50px;
            height: 64px;
            margin: 0 3px;
            border: 2px solid transparent;
        }

        .small img {
            width: 100%;
            height: 100%;
            vertical-align: middle;
        }

        .bigimage {
            left: 350px;
            position: absolute;
            width: 533px;
            height: 537px;
            border: 1px solid silver;
            box-sizing: border-box;
            display: none;
        }
    </style>
    <script>
        window.onload = function () {    // 窗体加载完成,HTML页面加载完毕后运行某个js
            //获取元素
            //  getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。字符串，多个类名用空格隔开
            var small = document.getElementsByClassName("small");
            var top = document.getElementsByClassName("top")[0];
            var middleimage = document.getElementsByClassName("middleimage")[0];
            var bigimage = document.getElementsByClassName("bigimage")[0];
            var cengD = document.getElementsByClassName("ceng")[0];
            var box = document.getElementsByClassName("box")[0];
            /*第一个小图默认边框颜色*/
            small[0].style.borderColor = "#e60000"
            for (var i = 0; i < small.length; i++) {
                var borderobject = small[0];

                small[i].onmouseenter = function () {  /*绑定事件*/
                    borderobject.style.borderColor = "transparent"
                    /*把上一个边框变成透明*/
                    this.style.borderColor = "#e60000";
                    /*当前鼠标进入的图片边框变成红色*/
                    borderobject = this;
                    /*记录这一次谁变色*/

                    middleimage.src = this.getAttribute("data-middle");
//           当鼠标进入时获取小图对应的中图,  中图的位置对应在小图的父容器中
                    top.setAttribute("data-da", this.getAttribute("data-big"));
//           当鼠标进入时获取小图对应的大图，大图的位置对应在小图的父容器中
                    /*setAttribute方法是将data-src这个对象保存在top作用域中*/

                    /* element.setAttribute(name,value)   作用就是保存数据
                     name	String	要添加的属性名称。
                     value	String	要添加的属性值。*/

                }

                top.onmousemove = function (e) {   /* e保存了当前事件的信息。如鼠标点击事件，有鼠标的坐标信息等*/
//                    设置鼠标样式
                    this.style.cursor = "move";
//                    获取鼠标的位置
                    var x = e.pageX || e.clientX;
                    /* clientX 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标）pageX 文档坐标*/
                    var y = e.pageY || e.clientY;
                    //如果你的容器是在中间  并且你不知道它的 左边距  坐标得减掉 当前容器 的偏移量  当前容器是最大的父容器（左做偏移量）
                    //判断层模块在block中的临界值
                    var left = (x - box.offsetLeft - 118.125) < 0 ? 0 : (x - box.offsetLeft - 118.125) >= 113.75 ? 113.75 : x - box.offsetLeft - 118.125;
                    var top = (y - box.offsetTop - 118.115) < 0 ? 0 : (y - box.offsetTop - 118.115) > 212.69 ? 212.69 : y - box.offsetTop - 118.115;
                    cengD.style.left = left + "px";   //给定层模块的左边距
                    cengD.style.top = top + "px";   //给定层模块的上边距
                    bigimage.style.backgroundPosition = -(left * 2.28) + "px " + (-top * 2.28) + "px";
                    /*大图的放大比例，坐标之间要有空格  即left的px后加空格*/
          }
                top.onmouseenter = function () {
                    cengD.style.display = "block";
                    bigimage.style.display = "block";
//                    让最大的图切换
                    bigimage.style.backgroundImage = "url(" + top.getAttribute("data-da") + ")";
                    /* data-da存放大图地址的属性*/
                }
                top.onmouseleave = function () {
                    cengD.style.display = "none";
                    bigimage.style.display = "none";
                }

            }
        }

    </script>
</head>
<body>
<div class="box">
    <div class="bigimage"></div>
    <div class="top" data-da="./image/5b7cf1e5Nb30e8c50.jpg!cc_800x1026.jpg">
        <div class="ceng"></div>
        <img class="middleimage" src="./image/5b7cf1e5Nb30e8c50.jpg!cc_350x449.jpg" alt="加载失败"/>
    </div>
    <div class="smallimage">
        <div class="small" data-big="./image/5b7cf1e5Nb30e8c50.jpg!cc_800x1026.jpg"
             data-middle="./image/5b7cf1e5Nb30e8c50.jpg!cc_350x449.jpg">
            <img src="./image/5b7cf1e5Nb30e8c50.jpg!cc_50x64.jpg" alt="加载失败"/>
        </div>
        <div class="small" data-big="./image/5b7cf1e9Nd7350f8b.jpg!cc_800x1026.jpg"
             data-middle="./image/5b7cf1e9Nd7350f8b.jpg!cc_350x449.jpg">
            <img src="./image/5b7cf1e9Nd7350f8b.jpg!cc_50x64.jpg" alt="加载失败"/>
        </div>
        <div class="small" data-big="./image/5b7cf1ebNdf72f42b.jpg!cc_800x1026.jpg"
             data-middle="./image/5b7cf1ebNdf72f42b.jpg!cc_350x449.jpg">
            <img src="./image/5b7cf1ebNdf72f42b.jpg!cc_50x64.jpg" alt="加载失败"/>
        </div>
        <div class="small" data-big="./image/5b7cf1ecN6742c614.jpg!cc_800x1026.jpg"
             data-middle="./image/5b7cf1ecN6742c614.jpg!cc_350x449.jpg">
            <img src="./image/5b7cf1ecN6742c614.jpg!cc_50x64.jpg" alt="加载失败"/>
        </div>
        <div class="small" data-big="./image/5b7cf1eeN9a440daf.jpg!cc_800x1026.jpg"
             data-middle="./image/5b7cf1eeN9a440daf.jpg!cc_350x449.jpg">
            <img src="./image/5b7cf1eeN9a440daf.jpg!cc_50x64.jpg" alt="加载失败"/>
        </div>
    </div>
</div>
</body>
</html>