模拟查看京东商品的放大镜效果

1、需求 ：模拟查看京东商品的放大镜效果。
2、HTML代码如下：

		<div id="preview" class="col pr-0">
            <div class="card bg-transparent mr-5 position-absolute">
              <!-- 中图片 -->
              <img id="md_img" class="card-img-top" src="img/57e3b072N661cd00d.jpg" alt="Card image cap">
              <!-- 遮罩层 -->
              <div id="mask" class="position-absolute d-none"></div>
              <!-- 透明层 -->
              <div id="super-mask" class="position-absolute"></div>
              <!-- 大图片 -->
              <div id="div-lg" class="position-absolute d-none"></div>
              <div class="card-body p-0 text-center">
                <!-- 左按钮 -->
                <img id="btn_left" src="img/hover-prev.png" class="btn float-left btn-light border-0 p-1 pt-4 pb-4 disabled">
                <div class="d-inline-block pt-2 mx-0 m-auto">
                  <ul id="ul_img" class="list-unstyled mb-0">
                    <!-- 小图片 -->
                    <!--<li class="float-left p-1">
                      <img src="img/57e3b072N661cd00d.jpg" data-md="img/57e3b072N661cd00d.jpg" data-lg="img/57e3b072N661cd00d.jpg">
                    </li>-->
                  </ul>
                </div>
                <!-- 右按钮 -->
                <img id="btn_right" src="img/hover-next.png" class="btn float-right btn-light border-0 p-1 pt-4 pb-4">
              </div>
            </div>
          </div>

3.css样式如下：

/*放大镜样式*/
#preview>.card>.card-body>div{
  width:248px;
  overflow:hidden;
}
#preview>.card>.card-body>div>ul{
  transition:all .5s linear;
}
#preview>.card>.card-body>div>ul>li{
  width:62px; height:62px;
}
#preview>.card>.card-body>div>ul img{
  width:52px; height:52px;
}
#preview>.card>.card-body>div>ul img:hover{
  border:1px solid #e4393c;
}
#preview>div>img{width:354px}
#mask{
  width:176px; height:176px;
  background-color:#ffa;
  opacity:.5;
}
#super-mask{
  width:352px; height:352px;
}
#div-lg{
  width:400px; height:400px;
  left:354px;
  z-index:1000;
  border: 1px solid rgba(0, 0, 0, 0.125)
}

4.js实现如下：

$(function () {
    if (location.search !== "") {
        var lid = location.search.split("=")[1];
        $.ajax({
            url: "http://localhost:6000/products",
            type: "get",
            data: { lid },
            dataType: "json",
            success: function (result) {
             var { pics, product, specs } = result;
            //图片加载
                var pic_html = "";
                for (var pic of pics) {
                    pic_html += `<li class="float-left p-1"><img src="${pic.sm}" data-md="${pic.md}" data-lg="${pic.lg}"></li>`
                }
                // 当小图片较多时会被挤下来成两行，因此重新加载ul的width，使其样式不发生改变
                var img_width = 62;
                var $ul_img = $("#ul_img");
                $ul_img.html(pic_html).css("width",img_width*pics.length);
                // 加载第一张小图片对应的中图片
                var $md_img = $("#md_img");
                $md_img.attr("src",pics[0].md);
                // 加载第一张小图片对应的大图片
                var $lg_img = $("#div-lg");
                $lg_img.css("background-image",`url(${pics[0].lg})`);
                // 点击左右箭头，移动小图片
                var $btn_left = $("#btn_left");
                var $btn_right = $("#btn_right");
                var times = 0;
                // 如果图片的数量小于4张，那么右边按钮就禁用
                if (pics.length <=4) {
                    $btn_right.addClass("disabled");
                }
                // 点击右边图片按钮时，触发点击事件
                $btn_right.click(function() {
                    if(!$btn_right.is(".disabled")){
                        // 每次点击左边按钮，次数+1
                        times++;
                        // 此时的ul的向右边移动的距离就是
                        $ul_img.css("margin-left",-times*img_width);
                        // 只要右边按钮可以点击，左边也可以点击
                        $btn_left.removeClass("disabled");
                        // 如果times==pics.length-4的话，右边按钮就禁用
                        if(times== pics.length-4)
                        $btn_right.addClass("disabled");
                    }
                })
                // 点击左边图片按钮时，触发点击事件
                $btn_left.click(function() {
                    if (!$btn_left.is(".disabled")){
                        // 每次点击左边按钮，次数-1
                        times--;
                        // ul移动的距离
                        $ul_img.css("margin-left",-times*img_width);
                        // 只要左边按钮可以点击，则右边按钮也可以点击
                        $btn_right.removeClass("disabled");
                        // 如果times为0，那么左边的按钮禁用
                        if (times ==0)
                        $btn_left.addClass("disabled"); 
                    }
                })
                // 当鼠标进入小图片时，切换为中图片。又要为每一个li>img，添加鼠标进入事件，那么就
                // 通过事件委托的方式来实现该操作
                $ul_img.on("mouseenter","li>img",function(){
                    $md_img.attr("src",$(this).attr("data-md"));
                    // 当切换中图片的，同时，加载大图片,获得当前小图片的data-lg属性
                    $lg_img.css("background-image",`url(${$(this).attr("data-lg")})`);
                })
                // 获取遮罩层
                var $mask = $("#mask");
                // 获取透明层
                var $superMask = $("#super-mask");
                //小遮罩层的大小
                var maskSize = 176;
                //super-mask的大小
                var superMaskSize = 352;
                // 当鼠标进出上层透明div时，切换小遮罩层mask的显示或隐藏
                $superMask.hover(function() {
                    $mask.toggleClass("d-none");
                    // 同时显示或隐藏大图片
                    $lg_img.toggleClass("d-none");
                })
                // 让遮罩层跟随鼠标移动
                .mousemove(function(e) {
                    // 无论鼠标移动在哪个位置，都获取遮罩层的中心坐标
                    var top = e.offsetY - maskSize/2;
                    var left = e.offsetX - maskSize/2;
                    // 如果top<0,就拉回0，如果top>superMaskSize-maskSize,就拉回边界位置
                    if(top<0) {
                        top = 0;
                    } else if(top>superMaskSize-maskSize){
                        top = superMaskSize-maskSize;
                    }
                    // 同理，左边界同上
                    if (left<0) {
                        left = 0;
                    }else if(left>superMaskSize-maskSize) {
                        left = superMaskSize-maskSize;
                    }
                    $mask.css({
                        top: top+"px",
                        left: left+"px"
                    })
                    // 同时修改大图片的背景图位置,中图片350，大图片800，比例16:7
                    $lg_img.css("background-position",`${-left*16/7}px ${-top*16/7}px`);
                })
            }
        })
    }
})

5.效果如图:

6.转载请注明出处。