通过JavaScript实现放大镜功能

最新推荐文章于 2024-07-17 15:26:15 发布

想当一个CV工程师

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量77

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/m0_52217128/article/details/120533546

版权

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <!--<link rel="stylesheet" href="css/index.css">-->
  <style>
    img {
      display: block;
    }

    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 350px;
      height: 350px;
      margin: 100px;
      border: 1px solid #ccc;
      position: relative;
    }

    .big {
      width: 400px;
      height: 400px;
      position: absolute;
      top: 0;
      left: 360px;
      overflow: hidden;
      display: none;
    }

    .big img {
      position: absolute;

    }

    .mask {
      width: 100px;
      height: 100px;
      background: rgba(255, 255, 0, 0.4);
      position: absolute;
      top: 0px;
      left: 0px;
      cursor: move;
      display: none;
    }

    .small {
      position: relative;
    }
  </style>
</head>

<body>
  <div class="box" id="box">
    <div class="small" id="small">
      <img src="small.jpg" width="350" alt="" />  //你的图片地址
      <div class="mask" id="mask"></div>
    </div>
    <div class="big" id="big">
      <img src="big.jpg" width="800" alt="" id="img" />  //你的图片地址
    </div>
  </div>
</body>


<script>
  class showImg {
    constructor() {
      this.boxObj = this.$('#box');
      this.smallObj = this.$('#small');
      this.maskObj = this.$('#mask');
      this.bigObj = this.$('#big');
      this.bImg = this.$('#img');

      // 给small绑定鼠标移入,移出事件
      this.smallObj.addEventListener('mouseenter', this.enterFn.bind(this));
      this.smallObj.addEventListener('mouseleave', this.leaveFn.bind(this));

      // 绑定鼠标移动事件
      this.smallObj.addEventListener('mousemove', this.moveFn.bind(this));

    }
    // 移入
    enterFn() {
      // console.log(this);
      // 1 显示小黄块和大图
      this.maskObj.style.display = 'block';
      this.bigObj.style.display = 'block';
    }
    // 移出
    leaveFn() {
      this.maskObj.style.display = 'none';
      this.bigObj.style.display = 'none';
    }
    // 移动
    moveFn(event) {
      // console.log(event);
      // 1 获取鼠标的实时位置
      let mx = event.pageX;
      let my = event.pageY;
      // 2 获取box的坐标值
      let boxT = this.boxObj.offsetTop;
      let boxL = this.boxObj.offsetLeft;

      // 3 计算滑块的坐标
      let tmpX = mx - boxL - this.maskObj.offsetWidth / 2;
      let tmpY = my - boxT - this.maskObj.offsetHeight / 2;

      // 3-1 计算最大的坐标
      let maxL = this.smallObj.offsetWidth - this.maskObj.offsetWidth;
      let maxT = this.smallObj.offsetHeight - this.maskObj.offsetHeight;

      // 4 判断边界值
      if (tmpX < 0) tmpX = 0
      if (tmpY < 0) tmpY = 0;

      // 最大值设置
      if (tmpX > maxL) tmpX = maxL;
      if (tmpY > maxT) tmpY = maxT;

      this.maskObj.style.left = tmpX + 'px';
      this.maskObj.style.top = tmpY + 'px';

      // 计算大图在div中,移动的最大位置
      let bigL = this.bigObj.offsetWidth - this.bImg.offsetWidth;
      let bigT = this.bigObj.offsetHeight - this.bImg.offsetHeight;

      // 计算大图的实时位置
      let tmpBigT = tmpY / maxT * bigT;
      let tmpBigL = tmpX / maxL * bigL;

      // 实时位置设置给大图
      this.bImg.style.left = tmpBigL + 'px';
      this.bImg.style.top = tmpBigT + 'px';
    }

    $(ele) {
      return document.querySelector(ele)
    }
  }
  new showImg;
</script>

</html>

想当一个CV工程师

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过JavaScript实现放大镜功能

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title>  <style> img { display: block; } * { .
复制链接

扫一扫