移動(dòng)端、PC端 網(wǎng)頁特效

2021-10-12    前端達(dá)人

移動(dòng)端網(wǎng)頁特效

觸屏事件

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

touch 對象代表一個(gè)觸摸點(diǎn)。觸摸點(diǎn)可能是一根手指，也可能是一根觸摸筆。觸屏事件可響應(yīng)用戶手指（或觸控筆）對屏幕或者觸控板操作。

常見的觸屏事件：
在這里插入圖片描述
觸摸事件對象（TouchEvent）

TouchEvent 是一類描述手指在觸摸平面（觸摸屏、觸摸板等）的狀態(tài)變化的事件。這類事件用于描述一個(gè)或多個(gè)觸點(diǎn)，使開發(fā)者可以檢測觸點(diǎn)的移動(dòng)，觸點(diǎn)的增加和減少，等等

touchstart、touchmove、touchend 三個(gè)事件都會(huì)各自有事件對象。

觸摸事件對象常見對象列表：
在這里插入圖片描述
因?yàn)槠綍r(shí)都是給元素注冊觸摸事件，所以重點(diǎn)記住 targetTocuhes

移動(dòng)端拖動(dòng)元素JS代碼實(shí)現(xiàn)： 

// （1） 觸摸元素 touchstart：  獲取手指初始坐標(biāo)，同時(shí)獲得盒子原來的位置 // （2） 移動(dòng)手指 touchmove：  計(jì)算手指的滑動(dòng)距離，并且移動(dòng)盒子 // （3） 離開手指 touchend: var div = document.querySelector('div'); var startX = 0; //獲取手指初始坐標(biāo) var startY = 0; var x = 0; //獲得盒子原來的位置 var y = 0; div.addEventListener('touchstart', function(e) { //  獲取手指初始坐標(biāo) startX = e.targetTouches[0].pageX; startY = e.targetTouches[0].pageY; x = this.offsetLeft; y = this.offsetTop; }); div.addEventListener('touchmove', function(e) { //  計(jì)算手指的移動(dòng)距離： 手指移動(dòng)之后的坐標(biāo)減去手指初始的坐標(biāo) var moveX = e.targetTouches[0].pageX - startX; var moveY = e.targetTouches[0].pageY - startY; // 移動(dòng)我們的盒子 盒子原來的位置 + 手指移動(dòng)的距離 this.style.left = x + moveX + 'px'; this.style.top = y + moveY + 'px'; e.preventDefault(); // 阻止屏幕滾動(dòng)的默認(rèn)行為 }); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    •

classList屬性

classList屬性是HTML5新增的一個(gè)屬性。返回元素的類名，該屬性用在元素中添加、移除及切換CSS類 

<style> .bg { background-color: black; } </style> <body> <div class="one two"></div> <button> 開關(guān)燈</button> <script> // classList 返回元素的類名 var div = document.querySelector('div'); // console.log(div.classList[1]); // 1. 添加類名  是在后面追加類名不會(huì)覆蓋以前的類名 注意前面不需要加. div.classList.add('three'); // 2. 刪除類名 div.classList.remove('one'); // 3. 切換類 var btn = document.querySelector('button'); btn.addEventListener('click', function() { document.body.classList.toggle('bg'); }) </script> </body> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    •

常用開發(fā)插件

移動(dòng)端 要求的是快速開發(fā)，所以經(jīng)常會(huì)借助于一些插件來幫完成操作

JS 插件是 js 文件，它遵循一定規(guī)范編寫，方便程序展示效果，擁有特定功能且方便調(diào)用。如輪播圖和瀑布流插件

插件的使用：

  1. 引入 js 插件文件
  2. 按照規(guī)定語法使用

特點(diǎn)： 它一般是為了解決某個(gè)問題而專門存在，其功能單一，并且比較小。比如移動(dòng)端常見插件：iScroll、Swiper、SuperSlider

PC端網(wǎng)頁特效

偏移量系列 offset

offset 翻譯過來就是偏移量， 使用 offset 系列相關(guān)屬性可以 動(dòng)態(tài) 的得到該元素的位置（偏移）、大小等。

  • 獲得元素距離帶有定位父元素的位置
  • 獲得元素自身的大?。▽挾雀叨龋?
  • 注意： 返回的數(shù)值都不帶單位

常用屬性：
在這里插入圖片描述
圖示：
在這里插入圖片描述

offset與style區(qū)別：

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

案例——獲取鼠標(biāo)在盒子內(nèi)的坐標(biāo)：

效果展示：
在這里插入圖片描述

實(shí)現(xiàn)代碼(JS)： 

// 在盒子內(nèi)點(diǎn)擊， 想要得到鼠標(biāo)距離盒子左右的距離。 // 首先得到鼠標(biāo)在頁面中的坐標(biāo)（ e.pageX, e.pageY） // 其次得到盒子在頁面中的距離(box.offsetLeft, box.offsetTop) // 用鼠標(biāo)距離頁面的坐標(biāo)減去盒子在頁面中的距離， 得到 鼠標(biāo)在盒子內(nèi)的坐標(biāo) var box = document.querySelector('.box'); box.addEventListener('mousemove', function(e) { // console.log(e.pageX); // console.log(e.pageY); // console.log(box.offsetLeft); var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; this.innerHTML = 'x坐標(biāo)是' + x + ' y坐標(biāo)是' + y; }) 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    •

案例——模態(tài)拖拽框：

  • 點(diǎn)擊彈出層， 會(huì)彈出模態(tài)框， 并且顯示灰色半透明的遮擋層。
  • 點(diǎn)擊關(guān)閉按鈕，可以關(guān)閉模態(tài)框，并且同時(shí)關(guān)閉灰色半透明遮擋層。
  • 鼠標(biāo)放到模態(tài)框最上面一行，可以按住鼠標(biāo)拖拽模態(tài)框在頁面中移動(dòng)。
  • 鼠標(biāo)松開，可以停止拖動(dòng)模態(tài)框移動(dòng)。

效果展示：
在這里插入圖片描述

實(shí)現(xiàn)代碼： 

<head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center; height: 30px; font-size: 24px; line-height: 30px; } ul,li,ol,dl,dt,dd,div,p,span,h1,h2,h3,h4,h5,h6,a { padding: 0px; margin: 0px; } .login { display: none; width: 512px; height: 280px; position: fixed; border: #ebebeb solid 1px; left: 50%; top: 50%; background: #ffffff; box-shadow: 0px 0px 20px #ddd; z-index: 9999; transform: translate(-50%, -50%); } .login-title { width: 100%; margin: 10px 0px 0px 0px; text-align: center; line-height: 40px; height: 40px; font-size: 18px; position: relative; cursor: move; } .login-input-content { margin-top: 20px; } .login-button { width: 50%; margin: 30px auto 0px auto; line-height: 40px; font-size: 14px; border: #ebebeb 1px solid; text-align: center; } .login-bg { display: none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, .3); } a { text-decoration: none; color: #000000; } .login-button a { display: block; } .login-input input.list-input { float: left; line-height: 35px; height: 35px; width: 350px; border: #ebebeb 1px solid; text-indent: 5px; } .login-input { overflow: hidden; margin: 0px 0px 20px 0px; } .login-input label { float: left; width: 90px; padding-right: 10px; text-align: right; line-height: 35px; height: 35px; font-size: 14px; } .login-title span { position: absolute; font-size: 12px; right: -20px; top: -30px; background: #ffffff; border: #ebebeb solid 1px; width: 40px; height: 40px; border-radius: 20px; } </style> </head> <body> <div class="login-header"><a id="link" href="javascript:;">點(diǎn)擊，彈出登錄框</a></div> <div id="login" class="login"> <div id="title" class="login-title">登錄會(huì)員 <span><a id="closeBtn" href="javascript:void(0);" class="close-login">關(guān)閉</a></span> </div> <div class="login-input-content"> <div class="login-input"> <label>用戶名：</label> <input type="text" placeholder="請輸入用戶名" name="info[username]" id="username" class="list-input"> </div> <div class="login-input"> <label>登錄密碼：</label> <input type="password" placeholder="請輸入登錄密碼" name="info[password]" id="password" class="list-input"> </div> </div> <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登錄會(huì)員</a></div> </div> <!-- 遮蓋層 --> <div id="bg" class="login-bg"></div> <script> // 1. 獲取元素 var login = document.querySelector('.login'); var mask = document.querySelector('.login-bg'); var link = document.querySelector('#link'); var closeBtn = document.querySelector('#closeBtn'); var title = document.querySelector('#title'); // 2. 點(diǎn)擊彈出層這個(gè)鏈接 link  讓mask 和login 顯示出來 link.addEventListener('click', function() { mask.style.display = 'block'; login.style.display = 'block'; }) // 3. 點(diǎn)擊 closeBtn 就隱藏 mask 和 login  closeBtn.addEventListener('click', function() { mask.style.display = 'none'; login.style.display = 'none'; }) // 4. 開始拖拽 // (1) 當(dāng)我們鼠標(biāo)按下， 就獲得鼠標(biāo)在盒子內(nèi)的坐標(biāo) title.addEventListener('mousedown', function(e) { var x = e.pageX - login.offsetLeft; var y = e.pageY - login.offsetTop; // (2) 鼠標(biāo)移動(dòng)的時(shí)候，把鼠標(biāo)在頁面中的坐標(biāo)，減去 鼠標(biāo)在盒子內(nèi)的坐標(biāo)就是模態(tài)框的left和top值 document.addEventListener('mousemove', move) function move(e) { login.style.left = e.pageX - x + 'px'; login.style.top = e.pageY - y + 'px'; } // (3) 鼠標(biāo)彈起，就讓鼠標(biāo)移動(dòng)事件移除 document.addEventListener('mouseup', function() { document.removeEventListener('mousemove', move); }) }) </script> </body> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    • 

    
  • 
        44
    
    • 

    
  • 
        45
    
    • 

    
  • 
        46
    
    • 

    
  • 
        47
    
    • 

    
  • 
        48
    
    • 

    
  • 
        49
    
    • 

    
  • 
        50
    
    • 

    
  • 
        51
    
    • 

    
  • 
        52
    
    • 

    
  • 
        53
    
    • 

    
  • 
        54
    
    • 

    
  • 
        55
    
    • 

    
  • 
        56
    
    • 

    
  • 
        57
    
    • 

    
  • 
        58
    
    • 

    
  • 
        59
    
    • 

    
  • 
        60
    
    • 

    
  • 
        61
    
    • 

    
  • 
        62
    
    • 

    
  • 
        63
    
    • 

    
  • 
        64
    
    • 

    
  • 
        65
    
    • 

    
  • 
        66
    
    • 

    
  • 
        67
    
    • 

    
  • 
        68
    
    • 

    
  • 
        69
    
    • 

    
  • 
        70
    
    • 

    
  • 
        71
    
    • 

    
  • 
        72
    
    • 

    
  • 
        73
    
    • 

    
  • 
        74
    
    • 

    
  • 
        75
    
    • 

    
  • 
        76
    
    • 

    
  • 
        77
    
    • 

    
  • 
        78
    
    • 

    
  • 
        79
    
    • 

    
  • 
        80
    
    • 

    
  • 
        81
    
    • 

    
  • 
        82
    
    • 

    
  • 
        83
    
    • 

    
  • 
        84
    
    • 

    
  • 
        85
    
    • 

    
  • 
        86
    
    • 

    
  • 
        87
    
    • 

    
  • 
        88
    
    • 

    
  • 
        89
    
    • 

    
  • 
        90
    
    • 

    
  • 
        91
    
    • 

    
  • 
        92
    
    • 

    
  • 
        93
    
    • 

    
  • 
        94
    
    • 

    
  • 
        95
    
    • 

    
  • 
        96
    
    • 

    
  • 
        97
    
    • 

    
  • 
        98
    
    • 

    
  • 
        99
    
    • 

    
  • 
        100
    
    • 

    
  • 
        101
    
    • 

    
  • 
        102
    
    • 

    
  • 
        103
    
    • 

    
  • 
        104
    
    • 

    
  • 
        105
    
    • 

    
  • 
        106
    
    • 

    
  • 
        107
    
    • 

    
  • 
        108
    
    • 

    
  • 
        109
    
    • 

    
  • 
        110
    
    • 

    
  • 
        111
    
    • 

    
  • 
        112
    
    • 

    
  • 
        113
    
    • 

    
  • 
        114
    
    • 

    
  • 
        115
    
    • 

    
  • 
        116
    
    • 

    
  • 
        117
    
    • 

    
  • 
        118
    
    • 

    
  • 
        119
    
    • 

    
  • 
        120
    
    • 

    
  • 
        121
    
    • 

    
  • 
        122
    
    • 

    
  • 
        123
    
    • 

    
  • 
        124
    
    • 

    
  • 
        125
    
    • 

    
  • 
        126
    
    • 

    
  • 
        127
    
    • 

    
  • 
        128
    
    • 

    
  • 
        129
    
    • 

    
  • 
        130
    
    • 

    
  • 
        131
    
    • 

    
  • 
        132
    
    • 

    
  • 
        133
    
    • 

    
  • 
        134
    
    • 

    
  • 
        135
    
    • 

    
  • 
        136
    
    • 

    
  • 
        137
    
    • 

    
  • 
        138
    
    • 

    
  • 
        139
    
    • 

    
  • 
        140
    
    • 

    
  • 
        141
    
    • 

    
  • 
        142
    
    • 

    
  • 
        143
    
    • 

    
  • 
        144
    
    • 

    
  • 
        145
    
    • 

    
  • 
        146
    
    • 

    
  • 
        147
    
    • 

    
  • 
        148
    
    • 

    
  • 
        149
    
    • 

    
  • 
        150
    
    • 

    
  • 
        151
    
    • 

    
  • 
        152
    
    • 

    
  • 
        153
    
    • 

    
  • 
        154
    
    • 

    
  • 
        155
    
    • 

    
  • 
        156
    
    • 

    
  • 
        157
    
    • 

    
  • 
        158
    
    • 

    
  • 
        159
    
    • 

    
  • 
        160
    
    • 

    
  • 
        161
    
    • 

    
  • 
        162
    
    • 

    
  • 
        163
    
    • 

    
  • 
        164
    
    • 

    
  • 
        165
    
    • 

    
  • 
        166
    
    • 

    
  • 
        167
    
    • 

    
  • 
        168
    
    •

可視區(qū)系列 client

client 翻譯過來就是客戶端，使用 client 系列的相關(guān)屬性來獲取元素可視區(qū)的相關(guān)信息。通過 client 系列的相關(guān)屬性可以動(dòng)態(tài)的得到該元素的邊框大小、元素大小等。

常用屬性：
在這里插入圖片描述
client和offset最大的區(qū)別就是 ：不包含邊框
圖示：
在這里插入圖片描述

滾動(dòng)系列 scroll

scroll 翻譯過來就是滾動(dòng)的，使用 scroll 系列的相關(guān)屬性可以動(dòng)態(tài)的得到該元素的大小、滾動(dòng)距離等。

常用屬性：
在這里插入圖片描述
圖示：
在這里插入圖片描述

滾動(dòng)條：

  • 如果瀏覽器的高（或?qū)挘┒炔蛔阋燥@示整個(gè)頁面時(shí)，會(huì)自動(dòng)出現(xiàn)滾動(dòng)條。
  • 當(dāng)滾動(dòng)條向下滾動(dòng)時(shí)，頁面上面被隱藏掉的高度，稱為頁面被卷去的頭部。
  • 滾動(dòng)條在滾動(dòng)時(shí)會(huì)觸發(fā) onscroll 事件。

案例——固定右側(cè)側(cè)邊欄：

  • 原先側(cè)邊欄是絕對定位
  • 當(dāng)頁面滾動(dòng)到一定位置，側(cè)邊欄改為固定定位
  • 頁面繼續(xù)滾動(dòng)，會(huì)讓 返回頂部顯示出來

效果展示：
在這里插入圖片描述

實(shí)現(xiàn)代碼： 

<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> .slider-bar { position: absolute; left: 50%; top: 300px; margin-left: 600px; width: 45px; height: 130px; background-color: pink; } .w { width: 1200px; margin: 10px auto; } .header { height: 150px; background-color: purple; } .banner { height: 250px; background-color: skyblue; } .main { height: 1000px; background-color: yellowgreen; } span { display: none; position: absolute; bottom: 0; } </style> </head> <body> <div class="slider-bar"> <span class="goBack">返回頂部</span> </div> <div class="header w">頭部區(qū)域</div> <div class="banner w">banner區(qū)域</div> <div class="main w">主體部分</div> <script> //1. 獲取元素 var sliderbar = document.querySelector('.slider-bar'); var banner = document.querySelector('.banner'); // banner.offestTop 就是被卷去頭部的大小 一定要寫到滾動(dòng)的外面 var bannerTop = banner.offsetTop // 當(dāng)側(cè)邊欄固定定位之后應(yīng)該變化的數(shù)值 var sliderbarTop = sliderbar.offsetTop - bannerTop; // 獲取main 主體元素 var main = document.querySelector('.main'); var goBack = document.querySelector('.goBack'); var mainTop = main.offsetTop; // 2. 頁面滾動(dòng)事件 scroll document.addEventListener('scroll', function() { // window.pageYOffset 頁面被卷去的頭部 // console.log(window.pageYOffset); // 3 .當(dāng)頁面被卷去的頭部大于等于了 172 此時(shí) 側(cè)邊欄就要改為固定定位 if (window.pageYOffset >= bannerTop) { sliderbar.style.position = 'fixed'; sliderbar.style.top = sliderbarTop + 'px'; } else { sliderbar.style.position = 'absolute'; sliderbar.style.top = '300px'; } // 4. 當(dāng)我們頁面滾動(dòng)到main盒子，就顯示 goback模塊 if (window.pageYOffset >= mainTop) { goBack.style.display = 'block'; } else { goBack.style.display = 'none'; } }) </script> </body> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    • 

    
  • 
        44
    
    • 

    
  • 
        45
    
    • 

    
  • 
        46
    
    • 

    
  • 
        47
    
    • 

    
  • 
        48
    
    • 

    
  • 
        49
    
    • 

    
  • 
        50
    
    • 

    
  • 
        51
    
    • 

    
  • 
        52
    
    • 

    
  • 
        53
    
    • 

    
  • 
        54
    
    • 

    
  • 
        55
    
    • 

    
  • 
        56
    
    • 

    
  • 
        57
    
    • 

    
  • 
        58
    
    • 

    
  • 
        59
    
    • 

    
  • 
        60
    
    • 

    
  • 
        61
    
    • 

    
  • 
        62
    
    • 

    
  • 
        63
    
    • 

    
  • 
        64
    
    • 

    
  • 
        65
    
    • 

    
  • 
        66
    
    • 

    
  • 
        67
    
    • 

    
  • 
        68
    
    • 

    
  • 
        69
    
    • 

    
  • 
        70
    
    • 

    
  • 
        71
    
    • 

    
  • 
        72
    
    • 

    
  • 
        73
    
    • 

    
  • 
        74
    
    • 

    
  • 
        75
    
    • 

    
  • 
        76
    
    • 

    
  • 
        77
    
    • 

    
  • 
        78
    
    • 

    
  • 
        79
    
    • 

    
  • 
        80
    
    • 

    
  • 
        81
    
    • 

    
  • 
        82
    
    • 

    
  • 
        83
    
    • 

    
  • 
        84
    
    •

三大系列作用區(qū)別：
在這里插入圖片描述

它們主要用法：

系列 作用 屬性
offset 用于獲得元素位置 offsetLeft offsetTop
client 用于獲取元素大小 clientWidth clientHeight
scroll 用于獲取滾動(dòng)距離 scrollTop scrollLeft

注意：頁面滾動(dòng)的距離通過 window.pageXOffset 獲得

動(dòng)畫原理

核心原理：通過定時(shí)器 setInterval() 不斷移動(dòng)盒子位置

實(shí)現(xiàn)步驟：

  1. 獲得盒子當(dāng)前位置
  2. 讓盒子在當(dāng)前位置加上1個(gè)移動(dòng)距離
  3. 利用定時(shí)器不斷重復(fù)這個(gè)操作
  4. 加一個(gè)結(jié)束定時(shí)器的條件
  5. 注意此元素需要添加定位，才能使用 element.style.left

簡單動(dòng)畫函數(shù)封裝： 

// 簡單動(dòng)畫函數(shù)封裝obj目標(biāo)對象 target 目標(biāo)位置 function animate(obj, target) { var timer = setInterval(function() { if (obj.offsetLeft >= target) { // 停止動(dòng)畫 本質(zhì)是停止定時(shí)器 clearInterval(timer); } //每次均勻向右移動(dòng)1px obj.style.left = obj.offsetLeft + 1 + 'px'; }, 30); } 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    •

緩動(dòng)效果原理：

緩動(dòng)動(dòng)畫就是讓元素運(yùn)動(dòng)速度有所變化，最常見的是讓速度慢慢停下來

  1. 讓盒子每次移動(dòng)的距離慢慢變小，速度就會(huì)慢慢落下來。
  2. 核心算法： (目標(biāo)值 - 現(xiàn)在的位置 ) / 10 做為每次移動(dòng)的距離步長
  3. 停止的條件是： 讓當(dāng)前盒子位置等于目標(biāo)位置就停止定時(shí)器
  4. 注意步長值需要取整 
// 緩動(dòng)動(dòng)畫函數(shù)封裝obj目標(biāo)對象 target 目標(biāo)位置 // 思路： // 1. 讓盒子每次移動(dòng)的距離慢慢變小， 速度就會(huì)慢慢落下來。 // 2. 核心算法：(目標(biāo)值 - 現(xiàn)在的位置) / 10 做為每次移動(dòng)的距離 步長 // 3. 停止的條件是： 讓當(dāng)前盒子位置等于目標(biāo)位置就停止定時(shí)器 function animate(obj, target) { // 先清除以前的定時(shí)器，只保留當(dāng)前的一個(gè)定時(shí)器執(zhí)行 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步長值寫到定時(shí)器的里面 var step = (target - obj.offsetLeft) / 10; if (obj.offsetLeft == target) { // 停止動(dòng)畫 本質(zhì)是停止定時(shí)器 clearInterval(obj.timer); } // 把每次加1 這個(gè)步長值改為一個(gè)慢慢變小的值  步長公式：(目標(biāo)值 - 現(xiàn)在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px'; }, 15); } 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    •

多個(gè)目標(biāo)值之間移動(dòng)：

當(dāng)開始移動(dòng)時(shí)候，判斷步長是正值還是負(fù)值

  • 如果是正值，則步長 往大了取整
  • 如果是負(fù)值，則步長 向小了取整

動(dòng)畫函數(shù)封裝到單獨(dú)JS文件： animate.js 

function animate(obj, target, callback) { // 先清除以前的定時(shí)器，只保留當(dāng)前的一個(gè)定時(shí)器執(zhí)行 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步長值寫到定時(shí)器的里面 // 把步長值改為整數(shù) 不要出現(xiàn)小數(shù)的問題 // var step = Math.ceil((target - obj.offsetLeft) / 10); var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { // 停止動(dòng)畫 本質(zhì)是停止定時(shí)器 clearInterval(obj.timer); // 回調(diào)函數(shù)寫到定時(shí)器結(jié)束里面 // if (callback) { //     // 調(diào)用函數(shù) //     callback(); // } callback && callback(); } // 把每次加1 這個(gè)步長值改為一個(gè)慢慢變小的值  步長公式：(目標(biāo)值 - 現(xiàn)在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px'; }, 15); }


    藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。





    





    分享此文一切功德，皆悉回向給文章原作者及眾讀者.





    轉(zhuǎn)自：csdn
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 





    藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至：

日歷

鏈接

個(gè)人資料

存檔