JavaScript 系列筆記：

JavaScript 系列筆記——目錄

點擊上方鏈接可查看更多筆記

JavaScript 網頁特效目錄

PC 端網頁特效

1. 元素偏移量 offset 系列

2. 元素可視區 client 系列

3. 元素滾動 scroll 系列

4. 影片函式封裝

移動端網頁特效

1. 觸屏事件

PC 端網頁特效

1. 元素偏移量 offset 系列

1.1 offset 概述

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

獲得元素距離帶有定位父元素的位置
獲得元素自身的大小（寬度高度）
注意：回傳的數值都不帶單位

offset 系列常用屬性：

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

2. 元素可視區 client 系列

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

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

3. 元素滾動 scroll 系列

3.1 元素 scroll 系列屬性

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

scroll系列屬性	作用
element.scrollTop	回傳被卷去的上側距離，回傳陣列不帶單位
element.scrollLeft	回傳被卷去的左側距離，回傳陣列不帶單位
element.scrollWidth	回傳自身實際的寬度，不含邊框，回傳數值不帶單位
element.scrollHeight	回傳自身實際的高度，不含邊框，回傳數值不帶單位

3.2 頁面被卷去的頭部

如果瀏覽器的高（或寬）度不足以顯示整個頁面時，會自動出現滾動條，當滾動條向下滾動時，頁面上面被隱藏掉的高度，我們就稱為頁面被卷去的頭部，滾動條在滾動時會觸發 onscroll 事件，

三大系列總結

三大系列大小對比	作用
element.offsetWidth	回傳自身包括padding、邊框、內容區的寬度，回傳數值不帶單位
element.clientWidth	回傳自身包括padding、內容區的寬度，不含邊框，回傳數值不帶單位
element.scrollWidth	回傳自身實際的寬度，不含邊框，回傳數值不帶單位

他們主要用法：

1. offset系列經常用于獲得元素位置 offsetLeft offsetTop

2. client 經常用于獲取元素大小 clientWidth clientHeight

3. scroll 經常用于獲取滾動距離 scrollTop scrollLeft

4. 注意頁面滾動的距離通過 window.pageXOffset 獲得

4. 影片函式封裝

4.1 影片實作原理

核心原理：通過定時器 setInterval() 不斷移動盒子位置，

實作步驟：

1. 獲得盒子當前位置

2. 讓盒子在當前位置加上1個移動距離

3. 利用定時器不斷重復這個操作

4. 加一個結束定時器的條件

5. 注意此元素需要添加定位，才能使用element.style.left

4.2 影片函式簡單封裝

注意函式需要傳遞2個引數，影片物件和移動到的距離，

4.3 影片函式給不同元素記錄不同定時器

如果多個元素都使用這個影片函式，每次都要var 宣告定時器，我們可以給不同的元素使用不同的定時器（自己專門用自己的定時器），

核心原理：利用 JS 是一門動態語言，可以很方便的給當前物件添加屬性

4.4 緩慢效果原理

緩動影片就是讓元素運動速度有所變化，最常見的是讓速度慢慢停下來思路：

1. 讓盒子每次移動的距離慢慢變小，速度就會慢慢落下來，

2. 核心演算法： (目標值 - 現在的位置 ) / 10 做為每次移動的距離步長

3. 停止的條件是：讓當前盒子位置等于目標位置就停止定時器

4. 注意步長值需要取整

4.5 影片函式多個目標值之間移動

可以讓影片函式從 800 移動到 500，當我們點擊按鈕時候，判斷步長是正值還是負值 1. 如果是正值，則步長往大了取整 2. 如果是負值，則步長向小了取整

4.6 影片函式添加回呼函式

回呼函式原理：函式可以作為一個引數，將這個函式作為引數傳到另一個函式里面，當那個函式執行完之后，再執行傳進去的這個函式，這個程序就叫做回呼，

回呼函式寫的位置：定時器結束的位置，

案例：點擊div能移動

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            top: 200px;
            width: 150px;
            height: 150px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div></div>

    <script>
        // 緩動影片函式封裝obj目標物件 target 目標位置
        // 思路：
        // 1. 讓盒子每次移動的距離慢慢變小， 速度就會慢慢落下來，
        // 2. 核心演算法：(目標值 - 現在的位置) / 10 做為每次移動的距離 步長
        // 3. 停止的條件是： 讓當前盒子位置等于目標位置就停止定時器
        function animate(obj, target) {
            // 先清除以前的定時器，只保留當前的一個定時器執行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 步長值寫到定時器的里面
                let step = (target - obj.offsetLeft) / 10;
                if (obj.offsetLeft == target) {
                    // 停止影片 本質是停止定時器
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 15);
        }
        let div = document.querySelector('div');
        div.addEventListener('click', function() {
                // 呼叫函式
                animate(this, 500);
            })
            // 勻速影片 就是 盒子是當前的位置 +  固定的值 10 
            // 緩動影片就是  盒子當前的位置 + 變化的值(目標值 - 現在的位置) / 10）
    </script>
</body>

</html>

移動端網頁特效

1. 觸屏事件

1.1 觸屏事件概述

移動端瀏覽器兼容性較好，我們不需要考慮以前 JS 的兼容性問題，可以放心的使用原生 JS 書寫效果，但是移動端也有自己獨特的地方，比如觸屏事件 touch（也稱觸摸事件），Android 和 IOS 都有，

touch 物件代表一個觸摸點，觸摸點可能是一根手指，也可能是一根觸摸筆，觸屏事件可回應用戶手指（或觸控筆）對螢屏或者觸控板操作，

觸屏touch事件	說明
touchstart	手指觸摸到一個 DOM 元素時觸發
touchmove	手指在一個 DOM 元素上滑動時觸發
touchend	手指從一個 DOM 元素上移開時觸發

1.2 觸摸事件物件（TouchEvent）

TouchEvent 是一類描述手指在觸摸平面（觸摸屏、觸摸板等）的狀態變化的事件，這類事件用于描述一個或多個觸點，使開發者可以檢測觸點的移動，觸點的增加和減少，等等 touchstart、touchmove、touchend 三個事件都會各自有事件物件，觸摸事件物件重點我們看三個常見物件串列：

觸摸串列	說明
touches	正在觸摸螢屏的所有手指的一個串列
targetTouches	正在觸摸當前 DOM 元素上的一個手指的一個串列
changeTouches	手指狀態發生了改變的串列，從無到有，從有到無變化

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/294964.html

標籤：其他

上一篇：JavaScript知識——事件、BOM簡介

下一篇：全端Web開發：使用JavaScript與Java書簽電子PDF