【JavaScript】offset、client、scroll、mouseover和mouseenter區別

耍酷的李世達發表於2020-10-02
JavaScriptclient

筆記

1.元素偏移量offset系列

1.1 offset概述

offset翻譯過來就是偏移量,我們使用offset系列相關屬性可以動態的得到該元素的位置(偏移)大小等。

  • 獲得元素距離帶有定位父元素的位置

  • 獲得元素自身的大小(寬度高度)

  • 注意:返回的數值都不帶單位

offset系列常用屬性:

offset系列屬性作用
element.offsetParent返回作為該元素帶有定位的父級元素如果父級都沒有定位則返回body
element.offsetTop返回元素相對帶有定位父元素上方的偏移
element.offsetLeft返回元素相對帶有定位父元素左邊框的偏移
element.offsetWidth返回自身包括padding、邊框、內容區的寬度，返回數值不帶單位
element.offsetHeight返回自身包括padding、邊框、內容區的高度，返回數值不帶單位

1.offsetParent和parentNode區別

console.log(son.offsetParent);//返回帶有定位的父親否則返回的是body

console.log(son.parentNode); //返回父親 不管父親有沒有定位

2.offset與style區別

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-DCav8jxR-1601646244735)(PC端網頁特效.assets/image-20200929113559569.png)]

案例：計算滑鼠在盒子裡的座標

①我們在盒子內點選,想要得到滑鼠距離盒子左右的距離

②首先得到滑鼠在頁面中的座標( e.pageX, e.pageY )

③其次得到盒子在頁面中的距離( box.offsetLeft, box.offsetTop)

④用滑鼠距離頁面的座標減去盒子在頁面中的距離,得到滑鼠在盒子內的座標

⑤如果想要移動一下滑鼠,就要獲取最新的座標,使用滑鼠移動事件mousemove

案例：模態框拖拽

彈出框,我們也稱為模態框。

1.點選彈出層，會彈出模態框,並且顯示灰色半透明的遮擋層。

2.點選關閉按鈕,可以關閉模態框,並且同時關閉灰色半透明遮擋層。

3.滑鼠放到模態框最上面一行,可以按住滑鼠拖拽模態框在頁面中移動。

4.滑鼠鬆開,可以停止拖動模態框移動。

分析：

①點選彈出層，模態框和遮擋層就會顯示出來display:block;

②點選關閉按鈕，模態框和遮擋層就會隱藏起來display:none;

③在頁面中拖拽的原理:滑鼠按下並且移動，之後鬆開滑鼠

④觸發事件是滑鼠按下mousedown,鼠 標移動mousemove滑鼠鬆開mouseup

⑤拖拽過程:滑鼠移動過程中，獲得最新的值賦值給模態框的Ieft和top值，這樣模態框可以跟著滑鼠走了

⑥滑鼠按下觸發的事件源是最上面一行，就是id為title

⑦滑鼠的座標減去滑鼠在盒子內的座標，才 是模態框真正的位置

案例：京東放大鏡效果

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-ypcuJ25l-1601646244752)(PC端網頁特效.assets/12.gif)]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
    <script src="jquery-1.12.4.js"></script>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: pink;
    }
    .preview_img {
      /* background-color: pink; */
      position: relative;
      width: 398px;
      height: 398px;
      margin-left: 50px;
      margin-top: 100px;
      cursor: move;
    }
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      display: none;
      width: 300px;
      height: 300px;
      background-color: #fede4f;
      opacity: 0.5;
    }
    .big {
      display: none;
      position: absolute;
      left: 550px;
      top: 0;
      width: 500px;
      height: 500px;
      overflow: hidden;
      border: 1px solid #ccc;
    }
    .big .bigImg {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
  <body>
    <div class="preview_img">
      <img src="imag/s3.png" alt="" />
      <div class="mask"></div>
    </div>
    <div class="big">
      <img class="bigImg" src="imag/big.jpg" alt="" />
    </div>
  </body>
  <script>
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    //1.當我們滑鼠經過 preview_img 就顯示和隱藏 mask 遮擋層 和 big 大盒子
    preview_img.addEventListener('mouseover', function () {
      big.style.display = 'block';
      mask.style.display = 'block';
    });
    preview_img.addEventListener('mouseout', function () {
      big.style.display = 'none';
      mask.style.display = 'none';
    });
    //2.滑鼠移動的時候，讓黃色的盒子跟著滑鼠來走
    // (1). 由於mask有定位在先計算出滑鼠在盒子內的座標
    preview_img.addEventListener('mousemove', function (e) {
      var x = e.pageX - this.offsetLeft - mask.offsetWidth / 2;
      var y = e.pageY - this.offsetTop - mask.offsetHeight / 2;
      //(3)設定mask最大移動距離maskMax和最小距離（0）
      //由於preview_img和mask都是正方形所以xy都是寬度
      maskMax = preview_img.offsetWidth - mask.offsetWidth;
      if (x <= 0) {
        x = 0;
      } else if (x >= maskMax) {
        x = maskMax;
      }
      if (y <= 0) {
        y = 0;
      } else if (y >= maskMax) {
        y = maskMax;
      }
      //(2)把滑鼠在盒子裡的座標給mask
      mask.style.left = x + 'px';
      mask.style.top = y + 'px';

      //3.遮擋層移動距離/遮擋層最大移動距離=大圖移動距離/大圖移動最大距離
      var bigImg = document.querySelector('.bigImg');
      var bigMax = bigImg.offsetWidth - big.offsetWidth;
      console.log(bigImg);
      //大圖移動的距離
      var bigx = (bigMax * x) / maskMax;
      var bigy = (bigMax * y) / maskMax;
      bigImg.style.left = -bigx + 'px';
      bigImg.style.top = -bigy + 'px';
    });
  </script>
</html>

2.元素可視區client系列

client翻譯過來就是客戶端,我們使用client系列的相關屬性來獲取元素可視區的相關資訊。通過client系列的相關屬性可以動態的得到該元素的邊框大小、元素大小等。

client系列屬性作用
element.clientTop返回元素上邊框的大小
element.clientLeft返回元素左邊框的大小
element.clientWidth返回自身包括padding、內容區的寬度，不含邊框，返回數值不帶單位
element.clientHeight返回自身包括padding、內容區的高度，不含邊框，返回數值不帶單位

立即執行函式

1.(function(){})();//有引數(function(a,b){})(a,b);

2.(function(){}());//有引數(function(a,b){}(a,b))

建立一個獨立的作用域

3.元素滾動scroll系列

scroll翻譯過來就是滾動的,我們使用scroll系列的相關屬性可以動態的得到該元素的大小滾動距離等。

scroll系列屬性作用
element.scrollTop返回被捲去的上側距離，返回數值不帶單位
element.scrollLeft返回被捲去的左側距離，返回數值不帶單位
element.scrollWidth返回自身實際的寬度（包含文字超出部分），不含邊框，返回數值不帶單位
element.scrollHeight返回自身實際的高度（包含文字超出部分），不含邊框，返回數值不帶單位

3.1頁面被捲去頭部相容性解決方案

需要注意的是,頁面被捲去的頭部,有相容性問題,因此被捲去的頭部通常有如下幾種寫法:

1.宣告瞭DTD ,使用document.documentElement.scrollTop

2.未宣告DTD ,使用document.body.scrollTop

3.新方法window.pageYOffset和window.pageXOffset , IE9開始支援

4.解決相容問題

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-4aN60KhR-1601646244756)(PC端網頁特效.assets/image-20200930122912793.png)]

案例：仿淘寶固定右側側邊欄

1.原先側邊欄是絕對定位

2.當頁面滾動到一定位置,側邊欄改為固定定位

3.頁面繼續滾動,會讓返回頂部顯示出來

分析：

①需要用到頁面滾動事件scroll因為是頁面滾動,所以事件源是document

②滾動到某個位置,就是判斷頁面被捲去的上部值。

③頁面被捲去的頭部:可以通過window.pageYOffset獲得如果是 被捲去的左window.pageXOffset

④注意:元素被卷去的頭部是element.scrollTop ,如果是頁面被卷去的頭部則是window.pageYOffset

三大系列總結

他們主要用法:

  1. offset系列 經常用於獲得元素位置offsetleft offsetTop
  2. client 經常用於獲取元素大小clientWidth clientHeight
  3. scroll 經常用於獲取滾動距離scrollTop scrollLeft
  4. 注意頁面滾動的距離通過window. pageOXffset

mouseover和mouseenter區別

  • 當滑鼠移動到元素上時就會觸發mouseenter事件
  • 類似mouseover ,它們兩者之間的差別是
  • mouseover 滑鼠經過自身盒子會觸發,經過子盒子還會觸發mouseenter 只會經過自身盒子觸發
  • 之所以這樣,就是因為mouseenter不會冒泡
  • 跟mouseenter搭配滑鼠離開mouseleave同樣不會冒泡

相關文章