放大镜效果

2019-08-28 11:01:02 阅读：250 来源： 互联网

标签：box style 效果放大镜 mask small var offsetWidth

<!DOCTYPE html>
<html>
<head lang="en">
  <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>
<!--导入外部的js文件-->
<script src="common.js"></script>
<script>
  var box = my$("box");
  var small = box.children[0];
  var big = box.children[1];
  var mask = small.children[1];
  var bigImage = big.children[0];
  box.onmouseover = function () {
    mask.style.display = "block";
    big.style.display = "block";
  };
  box.onmouseout = function () {
    mask.style.display = "none";
    big.style.display = "none";
  };
  small.onmousemove = function (e) {
    var x = e.clientX - mask.offsetWidth / 2;
    var y = e.clientY - mask.offsetHeight / 2;
    x = x - 100;
    y = y - 100;

    x = (x < 0)? 0:x;
    y = (y < 0)?0:y;

    x = (x > small.offsetWidth - mask.offsetWidth)? small.offsetWidth - mask.offsetWidth: x;
    y = (y > small.offsetHeight - mask.offsetHeight)? small.offsetHeight - mask.offsetHeight: y;

    mask.style.left = x + "px";
    mask.style.top = y + "px";

    var ratio = (bigImage.offsetWidth - big.offsetWidth) / (small.offsetWidth - mask.offsetWidth);

    var moveX = parseInt(x * ratio);
    var moveY = parseInt(y * ratio);

    bigImage.style.marginLeft = -moveX + "px";
    bigImage.style.marginTop = -moveY + "px";
  };

</script>


</body>
</html>

标签：box,style,效果,放大镜,mask,small,var,offsetWidth
来源： https://www.cnblogs.com/liualexsone/p/11422752.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

放大镜效果