原生js实现简易放大镜

最新推荐文章于 2024-05-06 18:26:11 发布

ou~吼

最新推荐文章于 2024-05-06 18:26:11 发布

阅读量142

点赞数 1

文章标签： javascript html css

本文链接：https://blog.csdn.net/ttl1076005106/article/details/104001548

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      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;
      border: 1px solid #ccc;
      overflow: hidden;
      display: none;
    }

    .mask {
      width: 175px;
      height: 175px;
      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"><!--小层-->
    <img src="images/small.png" width="350" alt=""/>
    <div class="mask"></div><!--遮挡层-->
  </div><!--小图-->
  <div class="big"><!--大层-->
    <img src="images/big.jpg" width="800" alt=""/><!--大图-->
  </div><!--大图-->
</div>
/*这里我封装了一个获取节点的函数，所有下面带myId,myqs之类的都是获取节点*/
<script type="text/javascript" src="js/commom.js"></script>
<script type="text/javascript">
  myId('box').onmouseover = function () {
    myqs('.mask').style.display = 'block';
    myqs('.big').style.display = 'block';
  };
  myId('box').onmouseout = function () {
    myqs('.mask').style.display = 'none';
    myqs('.big').style.display = 'none';
  };
  myqs('.small').onmousemove =function (event) {
    var x = event.clientX - myqs('.mask').offsetWidth / 2 - 100;
    var y = event.clientY - myqs('.mask').offsetHeight / 2 - 100;
    //最小值
    x = x < 0 ? 0 : x;
    y = y < 0 ? 0 : y;
    //最大值
    x = x > this.offsetWidth - myqs('.mask').offsetWidth ? this.offsetWidth - myqs('.mask').offsetWidth : x;
    y = y > this.offsetHeight - myqs('.mask').offsetHeight ? this.offsetHeight - myqs('.mask').offsetHeight : y;
    // 赋值
    myqs('.mask').style.left = x + 'px';
    myqs('.mask').style.top = y + 'px';

    //求大图的移动距离
    //先求大图的最大最大移动的距离
    //这里有个公式就是：大图的移动距离/小图的移动距离 = 大图最大的移动距离/小图最大的移动距离
    var bigMaxX = myqs('.big > img').offsetWidth - myqs('.big').offsetWidth;
    var bigMaxY = myqs('.big > img').offsetHeight - myqs('.big').offsetHeight;

    var bigX = x * bigMaxX / (this.offsetWidth - myqs('.mask').offsetWidth);
    var bigY = y * bigMaxY/ (this.offsetHeight - myqs('.mask').offsetHeight);

    /*赋值*/
    myqs('.big > img').style.marginLeft = -bigX + 'px';
    myqs('.big > img').style.marginTop = -bigY + 'px';
  }
</script>
</body>
</html>

ou~吼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js实现简易放大镜

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .box {...
复制链接

扫一扫