使用JQuery 写出放大镜的效果

一般的电商平台中都有放大图片的放大镜

以下是示例代码

以下是css代码

* {
        margin: 0;
        padding: 0;
      }

      .glass {
        width: 480px;
        position: relative;
        margin: 100px auto;
      }

      .mark {
        width: 100px;
        height: 100px;
        background: rgba(255, 255, 255, 0.6);
        position: absolute;
        top: 0;
        left: 0;
        display: none;
      }

      .bigImage,
      .bigImage img {
        width: 480px;
        height: 270px;
      }

      .bigImage {
        position: relative;
      }

      .bigImage img {
        position: absolute;
        display: none;
      }

      .smImage {
        width: 480px;
        margin-top: 20px;
      }

      .smImage img {
        width: 140px;
        margin: 0 8px;
        opacity: 0.6;
      }

      .glassView {
        width: 200px;
        height: 200px;
        position: absolute;
        right: -200px;
        top: 0;
        overflow: hidden;
        display: none;
      }

      .glassView img {
        width: 960px;
        height: 540px;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
      }

以下是html代码

 <div class="glass">
      <!-- 放大镜图片 -->
      <div class="glassView">
        <img src="./img/1.jpg" alt="" />
        <img src="./img/2.jpg" alt="" />
        <img src="./img/3.jpg" alt="" />
      </div>

      <!-- 大图 -->
      <div class="bigImage">
        <img src="./img/1.jpg" alt="" />
        <img src="./img/2.jpg" alt="" />
        <img src="./img/3.jpg" alt="" />
        <!-- 放大镜标记 -->
        <div class="mark"></div>
      </div>
      <!-- 缩略图 -->
      <div class="smImage">
        <img src="./img/1.jpg" alt="" />
        <img src="./img/2.jpg" alt="" />
        <img src="./img/3.jpg" alt="" />
      </div>
    </div>

以下是js 代码

// 1. js初始化效果
      // 1.1 第一个tab img 透明度为1
      var x = 0;
      $(".smImage>img:eq" + "(" + x + ")").css({ opacity: 1 });

      // 1.2 第一张大图片显示
      $(".bigImage>img:eq" + "(" + x + ")").css({ display: "block" });

      // 2. 分析交互效果
      // 2.1 tab切换
      $(".smImage>img").on("mouseenter", function(e) {
        // 2.2 上一个tab切换透明度变成0.6   上一张图片隐藏
        $(".smImage>img:eq" + "(" + x + ")").css({ opacity: 0.6 });
        $(".bigImage>img:eq" + "(" + x + ")").css({ display: "none" });

        // 2.3 当前移入元素透明度为1  显示当前元素
        x = $(this).index(); // 获取当前显示元素的索引
        $(".smImage>img:eq" + "(" + x + ")").css({ opacity: 1 });
        $(".bigImage>img:eq" + "(" + x + ")").css({ display: "block" });
      });
      // 3 显示，隐藏mark
      $(".bigImage").on("mouseenter", function() {
        $(".mark").css({ display: "block" });
        // 显示隐藏放大镜
        $(".glassView").css({ display: "block" });
        $(".glassView>img:eq" + "(" + x + ")").css({ display: "block" });
      });
      $(".bigImage").on("mouseleave", function() {
        $(".mark").css({ display: "none" });
        $('.glassView>img:eq' + "(" + x + ")").css({ display: 'none' })
      });
      // 让mark 与 鼠标 的位置 保持一致
      // 3.1 确定鼠标移动范围：大图片，给大图片绑定鼠标移动事件
      $(".bigImage").on("mousemove", function(e) {
        // 处理移动业务
        // 3.2 让mark 随着岁表移动而移动
        // 获取鼠标的位置，求mark  移动的位移
        // console.log(e.pageX); // 鼠标距离页面左边的位置
        // console.log($(this).offset().left) // 元素距离页面左边的距离
        var X = e.pageX - $(this).offset().left - 50; // 鼠标在元素上的位置(相对元素)
        var Y = e.pageY - $(this).offset().top - 50; // 鼠标在元素上的位置(相对元素)
        if (X < 0) {
          X = 0;
        }
        if (X > 380) {
          X = 380;
        }
        if (Y < 0) {
          Y = 0;
        }
        if (Y > 170) {
          Y = 170;
        }
        $(".mark").css({
          left: X,
          top: Y
        });
        $(".glassView>img:eq(" + x + ")").css({
        left: -X * 2 + "px",
        top: -Y * 2 + "px"
      });
      });

代码中均有注释 希望能帮到你们