放大镜案例

最新推荐文章于 2022-03-27 15:16:45 发布

Asmruan

最新推荐文章于 2022-03-27 15:16:45 发布

阅读量757

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/Asmruan/article/details/121940303

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      header,
      footer {
        float: left;
        border: 1px solid red;
        width: 500px;
        height: 500px;
        overflow: hidden;
        position: relative;
      }
      header img {
        height: 500px;
        width: 500px;
      }
      footer img {
        height: 1100px;
        width: 1100px;
      }
      #mask {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 200px;
        height: 200px;
        background-color: rgba(1, 1, 1, 0.4);
      }
    </style>
  </head>
  <body>
    <header>
      <img id="smallImg" src="./images/1.jpg" alt="" />
      <div id="mask"></div>
    </header>
    <footer>
      <img id="bigImg" src="./images/1.jpg" alt="" />
    </footer>
  </body>
</html>
<script>
  window.onload = function () {
    var footer = document.querySelector("footer");
    var header = document.querySelector("header");
    var bigImg = document.querySelector("#bigImg");
    var smallImg = document.querySelector("#smallImg");
    var mask = document.querySelector("#mask");

    //   1.让蒙版跟着鼠标动

    // 2.让右边跟着滚动

    // 1
    header.onmousemove = function (event) {
   

      var event = event || window.event;

      // 鼠标位置 减去  蒙版宽度一半  减去  大盒子距离左边的距离  减去 大盒子的左边框
      var maskLeft =
        event.clientX -
        mask.clientWidth / 2 -
        header.offsetLeft -
        header.clientLeft;
      var maskTop =
        event.clientY -
        mask.clientHeight / 2 -
        header.offsetTop -
        header.clientTop;

      // console.log(maskTop);
      // console.log(top);

      // 警戒值
      var maxLeft = header.offsetWidth - mask.clientWidth;
      var maxTop = header.offsetHeight - mask.offsetHeight;
      if (maskLeft >= maxLeft) {
        maskLeft = maxLeft;
      }
      if (maskLeft <= 0) {
        maskLeft = 0;
      }

      if (maskTop >= maxTop) {
        maskTop = maxTop;
      }
      if (maskTop <= 0) {
        maskTop = 0;
      }

      mask.style.left = maskLeft + "px";
      mask.style.top = maskTop + "px";


    //   2
    var scrollLeft = maskLeft*2
    footer.scrollLeft = scrollLeft 

    var scrollTop = maskTop*2
    footer.scrollTop = scrollTop 
    };
  };
</script>