图片固定可点击位置

LiuXiaodong2020

已于 2024-04-01 11:13:52 修改

阅读量364

点赞数 9

分类专栏： js 文章标签： javascript 图像处理

于 2024-03-18 17:56:37 首次发布

本文链接：https://blog.csdn.net/LiuXiaodong2020/article/details/136816495

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

图片固定可点击位置demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,body {
      width: 100%;
      height: 100%;
    }
    .picExrea {
      /* min-width: 1200px; */
      background-size: cover;
      background-position: left top;
      background-repeat: no-repeat;
      height: 100%;
      width: 100%;
      background-image: url(https://mail.10086.cn/images/img_bg.png);
      position: relative;
    }
    .clickOk {
      background-color: aqua;
      position: absolute;
    }
  </style>
</head>
<body>
  <div class="picExrea">
    <div class="clickOk"></div>
  </div>
  <script>
    let img = new Image();
    let naturalHeight = 0; // 正常高度
    let naturalWidth = 0; // 正常宽度
    let oldPicX = 200; // 可点击左上角原始x坐标
    let oldPicY = 100; // 可点击左上角原始y坐标
    let oldPicW = 200; // 可点击区域原始宽度
    let oldPicH = 200; // 可点击区域原始高度
    let nowW = 0; // 当前图片展示宽度
    let nowH = 0; // 当前图片展示高度
    const getPicDom = ()=>{
      /** 获取图片当前展示宽高 */
      let picDom = document.getElementsByClassName("picExrea")[0];
      let clickOk = document.getElementsByClassName("clickOk")[0];
      nowW = picDom.offsetWidth;
      nowH = picDom.offsetHeight;
      /** 判断哪边被裁剪了 */
      let isW = (nowW / naturalWidth) < (nowH / naturalHeight);
      let nowPicX, nowPicY, picW, picH;
      if(isW) { // 宽度被裁剪
        nowPicX = (nowH / naturalHeight) * oldPicX;
        nowPicY = (nowH / naturalHeight) * oldPicY;
        picW = (nowH / naturalHeight) * oldPicW;
        picH = (nowH / naturalHeight) * oldPicH;
      } else { // 高度被裁剪了
        nowPicX = (nowW / naturalWidth) * oldPicX;
        nowPicY = (nowW / naturalWidth) * oldPicY;
        picW = (nowW / naturalWidth) * oldPicW;
        picH = (nowW / naturalWidth) * oldPicH;
      }
      clickOk.style.width = picW + "px";
      clickOk.style.height = picH + "px";
      clickOk.style.top = nowPicY + "px";
      clickOk.style.left = nowPicX + "px";
    }
    img.src = "https://mail.10086.cn/images/img_bg.png";
    img.onload = ()=>{
      /** 获取图片原始宽高 */
      naturalHeight = img.naturalHeight;
      naturalWidth = img.naturalWidth;
      getPicDom();

      window.addEventListener('resize', getPicDom); // 可以将这里使用MutationObserver监听某一dom大小变化
    }
    

  </script>
</body>
</html>