js 实现京东放大镜效果

最新推荐文章于 2022-03-04 17:11:45 发布

辛望_上下求索

最新推荐文章于 2022-03-04 17:11:45 发布

阅读量274

点赞数

分类专栏： html、css、js 从入门到精通(问题整理) 文章标签： javascript css html html5 前端

本文链接：https://blog.csdn.net/qq_42877027/article/details/104959525

版权

html、css、js 从入门到精通(问题整理) 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

代码

<!DOCTYPE html>
<html lang="e1n">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        position: relative;
        margin-left: 50px;
      }
      .yuantu {
        position: relative;
        width: 400px;
        height: 400px;
        border: 1px solid green;
      }
      .mask {
        position: absolute;
        left: 20px;
        top: 20px;
        display: none;
        width: 200px;
        height: 200px;
        background-color: rgba(255, 0, 0, 0.5);
      }
      .enlarge {
        position: absolute;
        border: 1px solid red;
        left: 410px;
        top: 0;
        width: 400px;
        height: 400px;
        overflow: hidden;
        display: none;
      }
      .enlarge img {
        position: absolute;
        width: 800px;
        height: 800px;
      }
      img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <!--原图  -->
      <div class="yuantu">
        <img src="./img/1.png" alt="" />
        <!-- 蒙版 -->
        <div class="mask"></div>
      </div>

      <!-- 放大图 -->
      <div class="enlarge"><img src="./img/1.png" alt="" /></div>
    </div>

    <script>
      var yuantu = document.querySelector(".yuantu");
      var enlargeImg = document.querySelector(".enlarge img");
      var enlarge = document.querySelector(".enlarge");
      var mask = document.querySelector(".mask");

      yuantu.onmouseenter = function() {
        enlarge.style.display = "block";
        mask.style.display = "block";


        yuantu.onmousemove = function(e) {
          var left = e.clientX - offset(yuantu).left - 100;
          var top = e.clientY - offset(yuantu).top - 100;
          var maskWidth = mask.offsetWidth / 2;
          var maxX = yuantu.offsetWidth - maskWidth - 100
          var maxY = yuantu.offsetHeight - maskWidth - 100
          var scaleL = left/(yuantu.offsetWidth - mask.offsetWidth);
          var scaleT = top/(yuantu.offsetWidth - mask.offsetWidth);
          var bigImgW = enlargeImg.offsetWidth - enlarge.offsetWidth
          var bigImgH = enlargeImg.offsetWidth - enlarge.offsetWidth

        //   左边距
          if (left <= 0) {
            mask.style.left = 0 + "px";
          } else  if (left >= maxX) {
            mask.style.left = maxX  + "px";
          } else {
            mask.style.left = left + "px";
          }
        //   上边距
        if (top <= 0) {
            mask.style.top = 0 + "px";
          } else  if (top >= maxY) {
            mask.style.top = maxY  + "px";
          } else {
            mask.style.top = top + "px";
          }
          
        //   大图
        enlargeImg.style.left = -bigImgW * scaleL + 'px';
        enlargeImg.style.top = -bigImgH * scaleT + 'px';
        };
  
      };

      function offset(obj) {
        var l = 0;
        var t = 0;
        var bdl = obj.clientLeft; //目标元素的左边框宽度
        var bdt = obj.clientTop; //目标元素的上边框宽度
        while (obj) {
          //循环累加目标元素到定位父级的距离
          l = l + obj.offsetLeft + obj.clientLeft;
          t = t + obj.offsetTop + obj.clientTop;
          obj = obj.offsetParent; //每次循环之后指向离他最近的定位父级
        }
        return { left: l - bdl, top: t - bdt };
      }
    </script>
  </body>
</html>

辛望_上下求索

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 实现京东放大镜效果

代码<!DOCTYPE html><html lang="e1n"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>D...
复制链接

扫一扫