当前位置：网站首页>PC side web page special effects (offset series, obtain the coordinates of the mouse in the box, pop-up drag effect, magnifying glass effect)

PC side web page special effects (offset series, obtain the coordinates of the mouse in the box, pop-up drag effect, magnifying glass effect)

2022-07-28 22:37:00 【Green hedgerow bamboo maple】

1. Element offset offset series

offset The position of the element can be obtained dynamically by series related attributes （ The offset ）, Size, etc

（1） The position of the obtained element from the parent element with positioning

（2） The size of the obtained element itself （ Width height ）

Be careful , Returns a value without units

2.offset Series of common properties

offset Series properties effect
element.offsetParent Returns the parent element with positioning as the element , If the parent element is not located, it returns body
element.offsetTop Returns the offset above the parent element with relative positioning
element.offsetLeft Returns the offset of the left border of the parent element with relative positioning
element.offsetWidth Returning to itself includes padding, Frame , Width of content , Return value without unit
element.offsetHeight Returning to itself includes padding, Frame , Height of content area , Return value without unit 
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .father {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 150px;
    }

    .son {
      width: 150px;
      height: 150px;
      background-color: grey;
      margin-left: 20px;
    }
  </style>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
  <script>
    var father = document.querySelector('.father');
    var son = document.querySelector('.son');
    console.log(father.offsetTop);//150
    console.log(father.offsetLeft);//150
    //father No positioning or none father,offsetLeft according to body Calculate , Get the results 170
    //father When there is relative positioning ,offsetLeft according to father Calculation , Get the results 20
    console.log(son.offsetLeft);
    console.log(father.offsetWidth);//200
    console.log(father.offsetHeight);//200
    console.log(son.offsetWidth);//150
    console.log(son.offsetHeight);//150
    // Returns the parent element with the location 
    console.log(son.offsetParent);//<div></div>
    console.log(father.offsetParent);//<body></body>
  </script>
</body>

offset And style The difference between

offsetstyle
offset You can get the style values in any style sheet style You can only get the style values in the in line style sheet
offset The values obtained by the series have no units style.width What you get is a string with units
offsetWidth contain padding+border+widthstyle.width Get bad content padding and border Value
offsetWidth And so on are read-only properties style.Width read-write
It is suitable for getting only the size of elements Suitable for changing element values

Get the coordinates of the mouse in the box

Ideas ： Click... In the box , Want to get the distance between the mouse and the box , First get the coordinates of the mouse in the page (e.pageX,e.pageY), Second, get the distance of the box in the page (box.offsetLeft,box.offsetTop), Subtract the distance of the box from the coordinates of the mouse on the page to get the coordinates of the mouse in the box 

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      margin: 100px;
    }
  </style>
<body>
  <div class="box"></div>
  <script>
    var box = document.querySelector('.box');
    box.addEventListener('mouseover', function (e) {
      // console.log(e.pageX);
      // console.log(e.pageY);
      // console.log(box.offsetLeft);
      // console.log(box.offsetTop);
      var x = e.pageX - this.offsetLeft;
      var y = e.pageY - this.offsetTop;
      this.innerHTML = "x The value of is " + x + " y The value of is " + y;
    })
  </script>
</body>

Drag module box

Ideas ： Drag and drop effects include mouse clicks (mousedown), Mouse movement (mousemove), Release the mouse (mouseup), While the mouse is moving , Assign the obtained latest mouse coordinate value to the... Of the modal box left and top value , In this way, the modal box can follow the mouse

Subtract the coordinates of the mouse in the box from the coordinates of the mouse , That's where the modal box really is

 

 <style>
    .link {
      text-align: center;
      font-size: 30px;
      color: green;
    }

    * {
      margin: 0;
      padding: 0;
    }

    .mask {
      display: none;
      padding-top: 200px;
      width: 100%;
      height: 3000px;
      background-color: #DDDDDD;
    }

    .login {
      position: absolute;
      float: left;
      left: 100px;
      top: 200px;
      width: 600px;
      height: 400px;
      background-color: #fff;
    }

    .login p {
      width: 100%;
      height: 35px;
      /* background-color: pink; */
      font-size: 14px;
      line-height: 35px;
      text-align: center;
    }

    .login .msg {
      width: 100%;
      height: 240px;
      /* background-color: skyblue; */
      text-align: center;
    }

    .login .msg input {
      width: 500px;
      height: 30px;
      margin-top: 50px;
      outline: none;
    }

    .login .button {
      width: 100%;
      text-align: center;

    }

    button {
      margin-top: 30px;
      width: 300px;
      height: 50px;
      background-color: #FFFF00;
    }

    .logout {
      float: left;
      width: 50px;
      height: 50px;
      background-color: #FF8888;
      border-radius: 50%;
      margin-left: -25px;
      margin-top: -25px;
      text-align: center;
      font-size: 14px;
      line-height: 50px;
      color: #fff
    }
  </style>
<body>
  <div class="link"> Click login </div>
  <div class="mask">
    <div class="login">
      <p id="title"> Login member </p>
      <div class="msg">
         user name ：<input type="text"><br>
         The secret &nbsp;&nbsp;&nbsp; code ：<input type="password">
      </div>
      <div class="button">
        <button> Login member </button>
      </div>
    </div>
    <div class="logout">x</div>
  </div>
  
</body>

  <script>
    var link = document.querySelector('.link');
    var mask = document.querySelector('.mask');
    var logout = document.querySelector('.logout');
    var title = document.querySelector('#title');
    var login = document.querySelector('.login');
    // Click to close the hidden login interface 
    logout.addEventListener('click', function () {
      mask.style.display = 'none';
    })
    link.addEventListener('click', function () {
      mask.style.display = 'block';
      link.style.display = 'none';
    });
    //(1) The mouse click , You get the coordinates of the mouse in the box 
    title.addEventListener('mousedown', function (e) {
      // console.log(e.pageX);
      // console.log(e.pageY);
      //x coordinate 
      var x = e.pageX - login.offsetLeft;
      //y coordinate 
      var y = e.pageY - login.offsetTop;
      // console.log(x, y);
      // When the mouse is moving , Subtracting the coordinates of the mouse in the box from the coordinates of the mouse in the page is the coordinates of the modal box left and top value 
      document.addEventListener('mousemove', move)
      function move(e) {
        login.style.left = e.pageX - x + 'px';
        login.style.top = e.pageY - y + 'px';
      }
      // The mouse pop-up , Remove the mouse movement event 
      document.addEventListener('mouseup', function () {
        document.removeEventListener('mousemove', move)
      })
    })

  </script>

Imitation Jingdong magnifying glass

Ideas ： The mouse passes through the box of small pictures , Show the occlusion layer and large box , When the mouse leaves, two boxes are hidden

The occlusion layer follows the mouse , Big picture follows occlusion

Occlusion layer follows the mouse ： Get the coordinates of the mouse in the box , Then give the value to the occlusion layer as left and top Value

The shielding layer cannot exceed the scope of the small box , If it is less than 0, The nine eight coordinates are set to 0

The function of big picture following occlusion layer ： The formula of the moving distance of the large picture is that the ratio of the moving distance of the occlusion layer to the maximum moving distance of the occlusion layer is equal to the ratio of the moving distance of the large picture to the maximum moving distance of the large picture 

<style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {

      width: 1500px;
      height: 1500px;
      background-color: pink;
    }

    .small {
      position: relative;
      top: 0px;
      left: 0px;
      width: 900px;
      height: 900px;
      border: 1px solid grey;
      overflow: hidden;
    }

    .pic {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 300px;
      height: 300px;
      background-color: yellow;
      opacity: .5;
      border: 1px solid #ccc;
      cursor: move;

    }

    .sMig {
      width: 900px;
      height: 900px;
    }

    .big {
      display: none;
      position: absolute;
      top: 0;
      left: 910px;
      width: 1000px;
      height: 1000px;
      background-color: blueviolet;
      border: 1px solid #ccc;
      overflow: hidden;
    }

    .bMig {
      position: absolute;
      top: 0;
      height: 0;
      width: 2000px;
      height: 2000px;
    }
  </style>
<div class="box">
    <div class="small">
      <img class="sMig"
        src="https://img2.baidu.com/it/u=4273417027,1062450597&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" alt="">
      <div class="pic"></div>
    </div>
    <!-- <div class="pic"></div> -->
    <div class="big">
      <img class="bMig"
        src="https://img2.baidu.com/it/u=4273417027,1062450597&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" alt="">
    </div>
  </div>
 <script>
    // After loading, execute js
    window.addEventListener('load', function () {
      // Get the outermost box 
      var small = document.querySelector('.small');
      // Get occlusion 
      var pic = document.querySelector('.pic');
      // Get the big box 
      var big = document.querySelector('.big');
      var bMig = document.querySelector('.bMig')

      //1. When the mouse passes box when , Show and hide pic and big
      small.addEventListener('mousemove', function () {
        pic.style.display = 'block';
        big.style.display = 'block';
      })
      small.addEventListener('mouseout', function () {
        pic.style.display = 'none';
        big.style.display = 'none';
      })
      //2. Occlusion layer follows the mouse 
      small.addEventListener('mousemove', function (e) {
        // Calculate the coordinates of the mouse in the box 
        // console.log(e.pageX);
        // console.log(e.pageY);
        // Get mouse coordinates 
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x, y);
        // Mouse coordinates to the box , And place the mouse in the center of the mask layer 
        // pic.style.left = x - pic.offsetWidth / 2 + 'px';
        // pic.style.top = y - pic.offsetHeight / 2 + 'px';
        var picX = x - pic.offsetWidth / 2;
        var picY = y - pic.offsetHeight / 2;
        // If x Coordinates less than 0 Just stop at 0 The location of , Greater than 0, Stop at the position where the width of the small box minus the width of the mask layer , Because the position calculation is always related to the left 
        if (picX < 0) {
          picX = 0;
        } else if (picX >= small.offsetWidth - pic.offsetWidth) {
          picX = small.offsetWidth - pic.offsetWidth;
        }
        pic.style.left = picX + 'px';

        if (picY < 0) {
          picY = 0;
        } else if (picY > small.offsetHeight - pic.offsetHeight) {
          picY = small.offsetHeight - pic.offsetHeight;
        }
        pic.style.top = picY + 'px';
        // Large picture moving distance = The moving distance of the occlusion layer * Maximum moving distance of large picture / Maximum movement distance of occlusion layer 
        // The moving distance of the occlusion layer picX and picY, Maximum movement distance of occlusion layer small.offsetWidth - pic.offsetWidth
        var picMaxX = small.offsetWidth - pic.offsetWidth;
        var picMaxY = small.offsetHeight - pic.offsetHeight;
        // Big picture 
        var bigMaxX = big.offsetWidth - bMig.offsetWidth;
        var bigMaxY = big.offsetHeight - bMig.offsetHeight;
        // Large picture moving distance 
        var bigX = picX * bigMaxX / picMaxX;
        var bigY = picY * bigMaxY / picMaxY;
        bMig.style.left = bigX + 'px';
        bMig.style.top = bigY + 'px';
      })
    })
  </script>

原网站

版权声明
本文为[Green hedgerow bamboo maple]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/196/202207130601354962.html

边栏推荐

猜你喜欢

随机推荐