pink老師有點意思~

學習目錄：

元素偏移量 offset 系列
元素可視區 client 系列
元素滾動 scroll 系列
動畫函數封裝
常見網頁特效案例

1. 元素偏移量 offset 系列

1.1 offset 概述

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

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

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

1.2 offset 和 style 區別

offset	style
offset 可以得到任意樣式表中的樣式值	style 只能得到行內樣式表中的樣式值
offset 系列獲得的是數值是沒有單位的	style.width 獲得的是帶有單位的字符串
offsetWidth 包含padding + border + width	style.width 獲得不包含padding和border的值
offsetWidth 等屬性是隻讀屬性，只能獲取不能賦值	style.width 是可讀屬性，可以獲取也可以賦值
所以，我們想要獲取元素大小位置，用offset更合適	所以.我們想要給元素更改值，則需要用style改變

2. 元素可視區 client 系列

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

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

2.1 client，style.width，offsetWidth的栗子

<!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>
        div {
            height: 200px;
            width: 200px;
            padding: 20px;
            border: 5px saddlebrown solid;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div style="width: 200px;"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.offsetWidth);
        console.log(div.style.width);
        console.log(div.clientWidth);
    </script>
</body>

</html>

2.2 flexible.js 源碼分析

3. 元素 scroll 系列屬性

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

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

<body>
    <div style="
        width: 200px;
        height: 200px;
        overflow: auto;">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit voluptatibus quos distinctio similique eius sed natus reprehenderit. Tempore, tempora odio vel molestias deleniti praesentium quam sapiente rem temporibus, eos nemo in esse dicta similique.
        Iusto blanditiis impedit, facilis neque optio sit. Neque ab fugiat ad magnam dolore quod atque exercitationem incidunt fugit! Ea reiciendis odio possimus impedit quo dolorem tenetur voluptatem vero ab tempore, recusandae dolor ut magnam, in atque
        vitae saepe sapiente doloribus explicabo aspernatur deleniti. Natus vel, cum temporibus quo deleniti praesentium. Expedita corporis similique, at dignissimos beatae, tempora unde iure, consequatur sunt sit quaerat enim? Dolorem, consequuntur.</div>
    <script>
        var div = document.querySelector('div');
        console.log(div.scrollHeight);
        console.log(div.clientTop);
        div.addEventListener('scroll', function() {
            console.log(div.scrollTop);
        })
    </script>
</body>

3.1案例淘寶固定側邊欄

總結：三大系列的區別

他們主要用法：

offset系列，經常用於獲得元素位置： offsetLeft offsetTop
client經常用於獲取元素大小：clientWidth、 clientHeight
scroll經常用於獲取滾動距離：scrollTop、scrollLeft
注意頁面滾動的距離通過：window.pageXOffset獲得

4. 動畫函數封裝

4.1 動畫實現原理

核心原理：通過定時器setinterval()不斷移動盒子的位置
現實步驟：

獲取當前盒子的位置.
讓盒子在當前位置上加上1個移動距離
利用定時器不斷重複這一操作
加一個結束定時器的條件
之一此元素需要添加定位，才能使用element.style.left

<!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>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        var timer = setInterval(move, 30);

        function move() {
            if (div.offsetLeft >= 400) {
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 1 + 'px';
        }
    </script>
</body>

</html>

4.2 簡單動畫封裝

<!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>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        span {
            display: block;
            position: absolute;
            left: 0;
            width: 10px;
            height: 20px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div></div>
    <span></span>
    <script>
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        // 目標對象 目標位置
        function animation(obj, target) {
            var timer = setInterval(move, 30);

            function move() {
                if (obj.offsetLeft >= target) {
                    clearInterval(timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';
            }
        }


        animation(span, 300);
        animation(div, 200);
    </script>
</body>

</html>

4.3 優化

<!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>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        span {
            display: block;
            position: absolute;
            left: 0;
            width: 10px;
            height: 20px;
            background-color: aqua;
        }
        
        button {
            z-index: 1;
            display: block;
            background-color: red;
            position: absolute;
            top: 200px;
        }
    </style>
</head>

<body>
    <div></div>
    <span></span>
    <button>夏雨荷</button>
    <script>
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn = document.querySelector('button');
        var obj = {};
        // 目標對象 目標位置
        btn.addEventListener('click', function() {
            animation(span, 300);
            animation(div, 200);
        })

        function animation(obj, target) {
            clearInterval(obj.timer); /* 讓每次只有一個定時器 */
            if (obj.offsetLeft >= target) {/* 避免到達指定位置後點擊後移 */
                return;
            } else {
                obj.timer = setInterval(move, 30);
                // 1. 不佔內存   2. 避免命名衝突
                function move() {
                    if (obj.offsetLeft >= target) {
                        clearInterval(obj.timer);
                    }
                    obj.style.left = obj.offsetLeft + 1 + 'px';
                }
            }

        }
    </script>
</body>

</html>

4.4 緩動效果原理

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

讓盒子每次移動的距離慢慢變小，速度就會慢慢落下
核心算法：(目標值 - 現在的位置) / 10 做爲每次移動的距離步長
停止條件：到指定位置

<!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>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        span {
            display: block;
            position: absolute;
            left: 0;
            width: 10px;
            height: 20px;
            background-color: aqua;
        }
        
        button {
            z-index: 1;
            display: block;
            background-color: red;
            position: absolute;
            top: 200px;
        }
    </style>
</head>

<body>
    <div></div>
    <span></span>
    <button>夏雨荷</button>
    <script>
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn = document.querySelector('button');
        var obj = {};
        // 目標對象 目標位置
        btn.addEventListener('click', function() {
            animation(span, 300);
            // animation(div, 200);
        })

        function animation(obj, target) {
            clearInterval(obj.timer); /* 讓每次只有一個定時器 */
            if (obj.offsetLeft >= target) { /* 避免到達指定位置後點擊後移 */

            } else {
                obj.timer = setInterval(move, 30);
                // 1. 不佔內存   2. 避免命名衝突
                function move() {
                    if (obj.offsetLeft == target) {
                        clearInterval(obj.timer);
                    }
                    var step = (target - obj.offsetLeft) / 10;
                    obj.style.left = obj.offsetLeft + step + 'px';
                }
            }
        }
    </script>
</body>

</html>

4.5 前後緩動效果

<!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>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        span {
            display: block;
            position: absolute;
            left: 0;
            width: 10px;
            height: 20px;
            background-color: aqua;
        }
        
        button {
            z-index: 1;
            display: block;
            background-color: red;
            position: absolute;
            top: 200px;
        }
        
        .button800 {
            top: 230px;
        }
    </style>
</head>

<body>
    <div></div>
    <span></span>
    <button class="button500">夏雨荷</button>
    <button class="button800">馬什麼梅</button>
    <script>
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn500 = document.querySelector('.button500');
        var btn800 = document.querySelector('.button800');
        var obj = {};
        // 目標對象 目標位置
        btn500.addEventListener('click', function() {
            animation(span, 500);
        })
        btn800.addEventListener('click', function() {
            animation(span, 800);
        })

        function animation(obj, target) {
            clearInterval(obj.timer); /* 讓每次只有一個定時器 */
            obj.timer = setInterval(move, 30);
            // 1. 不佔內存   2. 避免命名衝突
            function move() {
                /* 將目標值取整 */
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step); /* key */

                console.log(target - obj.offsetLeft);

                obj.style.left = obj.offsetLeft + step + 'px';
            }
        }
    </script>
</body>

</html>

4.6 緩動動畫添加回調函數

回調函數原理：函數可以作爲一個參數，將這個函數作爲參數傳遞到另一個函數裏面，當那個函數執行完之後，再去執行傳進去的這個函授，這個過程就叫回調

<!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>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        span {
            display: block;
            position: absolute;
            left: 0;
            width: 10px;
            height: 20px;
            background-color: aqua;
        }
        
        button {
            z-index: 1;
            display: block;
            background-color: red;
            position: absolute;
            top: 200px;
        }
        
        .button800 {
            top: 230px;
        }
    </style>
</head>

<body>
    <div></div>
    <span></span>
    <button class="button500">夏雨荷</button>
    <button class="button800">馬什麼梅</button>
    <script>
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn500 = document.querySelector('.button500');
        var btn800 = document.querySelector('.button800');
        var obj = {};
        // 目標對象 目標位置
        btn500.addEventListener('click', function() {
            animation(span, 500, function() {});
        })
        btn800.addEventListener('click', function() {
            animation(span, 800, function() {
                // alert('帥')
                div.style.backgroundColor = 'green';
            });
        })


        function animation(obj, target, callback) {
            clearInterval(obj.timer); /* 讓每次只有一個定時器 */
            obj.timer = setInterval(move, 30);
            // 1. 不佔內存   2. 避免命名衝突
            function move() {
                /* 將目標值取整 */
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step); /* key */


                obj.style.left = obj.offsetLeft + step + 'px';
                if (target == obj.offsetLeft) {
                    clearInterval(obj.timer);
                    if (callback) {
                        callback();
                    }
                }
            }
        }
    </script>
</body>

</html>

4.7 動畫函數封裝到單獨的JS文件裏面

因爲以後經常使用這個動畫函數，可以單獨封裝到一個JS文件裏面，使用的時候引用這個JS文件即可

animate.js鏈接

節流閥

防止輪播圖按鈕連續點擊造成播放過快
節流閥目的：當上一個函數動畫內容執行完畢，再去執行下一個函數動畫，讓事件無法連續觸發
核心實現思路：利用回調函數，添加一個變量來控制，鎖住函數和解鎖函數

開始設置一個變量var flag = true；

 if(flag){
 	flag = false;
 	dosomething
 }
 (關閉水龍頭)

利用回調函數動畫執行完畢後，flag = true 打開水龍頭

PC端網頁特效學習目標（作爲學習筆記）

pink老師有點意思~

學習目錄：

1. 元素偏移量 offset 系列

1.1 offset 概述

1.2 offset 和 style 區別

2. 元素可視區 client 系列

2.1 client，style.width，offsetWidth的栗子

2.2 flexible.js 源碼分析

3. 元素 scroll 系列屬性

3.1案例淘寶固定側邊欄

總結：三大系列的區別

4. 動畫函數封裝

4.1 動畫實現原理

4.2 簡單動畫封裝

4.3 優化

4.4 緩動效果原理

4.5 前後緩動效果

4.6 緩動動畫添加回調函數

4.7 動畫函數封裝到單獨的JS文件裏面

節流閥

記住用戶名（利用本地存儲）

js 加載事件

mouseenter 和 mouseover的區別

animation動畫封裝函數（js小案例）

swiper的監測是第幾頁的回調函數

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

PC端網頁特效學習目標（作爲學習筆記）

pink老師有點意思~

學習目錄：

1. 元素偏移量 offset 系列

1.1 offset 概述

1.2 offset 和 style 區別

2. 元素可視區 client 系列

2.1 client，style.width，offsetWidth的栗子

2.2 flexible.js 源碼分析

3. 元素 scroll 系列屬性

3.1案例 淘寶固定側邊欄

總結： 三大系列的區別

4. 動畫函數封裝

4.1 動畫實現原理

4.2 簡單動畫封裝

4.3 優化

4.4 緩動效果原理

4.5 前後緩動效果

4.6 緩動動畫添加回調函數

4.7 動畫函數封裝到單獨的JS文件裏面

節流閥

3.1案例淘寶固定側邊欄

總結：三大系列的區別