当前位置：网站首页>Magnifier case

Magnifier case

2022-06-26 02:14:00 【Asmruan】 

<!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. Let the mask move with the mouse 

    // 2. Let the right side follow the scroll 

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

      var event = event || window.event;

      //  Mouse position   subtract    Half the mask width    subtract    The distance from the big box to the left    subtract   The left border of the big box 
      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);

      //  Warning value 
      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>

原网站

版权声明
本文为[Asmruan]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202180550383683.html

边栏推荐

猜你喜欢

随机推荐