移動端網頁特效
觸屏事件
移動端瀏覽器兼容性較好，不需要考慮以前 JS 的兼容性問題，可以放心的使用原生 JS 書寫效果，但是移動端也有自己獨特的地方。比如觸屏事件 touch（也稱觸摸事件），Android 和 IOS 都有。
touch 對象代表一個觸摸點。觸摸點可能是一根手指，也可能是一根觸摸筆。觸屏事件可響應用戶手指（或觸控筆）對屏幕或者觸控板操作。
常見的觸屏事件：
觸摸事件對象（TouchEvent）
TouchEvent 是一類描述手指在觸摸平面（觸摸屏、觸摸板等）的狀態變化的事件。這類事件用于描述一個或多個觸點，使開發者可以檢測觸點的移動，觸點的增加和減少，等等
touchstart、touchmove、touchend 三個事件都會各自有事件對象。
觸摸事件對象常見對象列表：
因為平時都是給元素注冊觸摸事件，所以重點記住 targetTocuhes
移動端拖動元素JS代碼實現：
var div = document.querySelector('div'); var startX = 0; var startY = 0; var x = 0; var y = 0; div.addEventListener('touchstart', function(e) { startX = e.targetTouches[0].pageX; startY = e.targetTouches[0].pageY; x = this.offsetLeft; y = this.offsetTop; }); div.addEventListener('touchmove', function(e) { var moveX = e.targetTouches[0].pageX - startX; var moveY = e.targetTouches[0].pageY - startY; this.style.left = x + moveX + 'px'; this.style.top = y + moveY + 'px'; e.preventDefault(); });
-
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新增的一個屬性。返回元素的類名，該屬性用在元素中添加、移除及切換CSS類
<style> .bg { background-color: black; } </style> <body> <div class="one two"></div> <button> 開關燈</button> <script> var div = document.querySelector('div'); div.classList.add('three'); div.classList.remove('one'); 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
常用開發插件
移動端 要求的是快速開發，所以經常會借助于一些插件來幫完成操作
JS 插件是 js 文件，它遵循一定規范編寫，方便程序展示效果，擁有特定功能且方便調用。如輪播圖和瀑布流插件
插件的使用：
-
引入 js 插件文件
-
按照規定語法使用
特點： 它一般是為了解決某個問題而專門存在，其功能單一，并且比較小。比如移動端常見插件：iScroll、Swiper、SuperSlider
PC端網頁特效
偏移量系列 offset
offset 翻譯過來就是偏移量， 使用 offset 系列相關屬性可以 動態 的得到該元素的位置（偏移）、大小等。
-
獲得元素距離帶有定位父元素的位置
-
獲得元素自身的大?。▽挾雀叨龋?
-
注意： 返回的數值都不帶單位
常用屬性：
圖示：
offset與style區別：
|
offset
|
style
|
|
可以得到任意樣式表中的樣式值
|
只能得到行內樣式表中的樣式值
|
|
offset系列獲得的數值是沒有單位的
|
style.width 獲得的是帶有單位的字符串
|
|
offsetWidth 包含padding+border+width
|
style.width 獲得不包含padding和border 的值
|
|
offsetWidth 等屬性是只讀屬性，只能獲取不能賦值
|
style.width 是可讀寫屬性，可以獲取也可以賦值
|
|
獲取元素大小位置，用offset更合適
|
元素更改值，則需要用style改變
|
案例——獲取鼠標在盒子內的坐標：
效果展示：
實現代碼(JS)：
var box = document.querySelector('.box'); box.addEventListener('mousemove', function(e) { var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; this.innerHTML = 'x坐標是' + x + ' y坐標是' + y; })
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
案例——模態拖拽框：
-
點擊彈出層， 會彈出模態框， 并且顯示灰色半透明的遮擋層。
-
點擊關閉按鈕，可以關閉模態框，并且同時關閉灰色半透明遮擋層。
-
鼠標放到模態框最上面一行，可以按住鼠標拖拽模態框在頁面中移動。
-
鼠標松開，可以停止拖動模態框移動。
效果展示：
實現代碼：
<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:;">點擊，彈出登錄框</a></div> <div id="login" class="login"> <div id="title" class="login-title">登錄會員 <span><a id="closeBtn" href="javascript:void(0);" class="close-login">關閉</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">登錄會員</a></div> </div> <div id="bg" class="login-bg"></div> <script> 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'); link.addEventListener('click', function() { mask.style.display = 'block'; login.style.display = 'block'; }) closeBtn.addEventListener('click', function() { mask.style.display = 'none'; login.style.display = 'none'; }) title.addEventListener('mousedown', function(e) { var x = e.pageX - login.offsetLeft; var y = e.pageY - login.offsetTop; document.addEventListener('mousemove', move) function move(e) { login.style.left = e.pageX - x + 'px'; login.style.top = e.pageY - y + 'px'; } 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
可視區系列 client
client 翻譯過來就是客戶端，使用 client 系列的相關屬性來獲取元素可視區的相關信息。通過 client 系列的相關屬性可以動態的得到該元素的邊框大小、元素大小等。
常用屬性：
client和offset最大的區別就是 ：不包含邊框
圖示：
滾動系列 scroll
scroll 翻譯過來就是滾動的，使用 scroll 系列的相關屬性可以動態的得到該元素的大小、滾動距離等。
常用屬性：
圖示：
滾動條：
-
如果瀏覽器的高（或寬）度不足以顯示整個頁面時，會自動出現滾動條。
-
當滾動條向下滾動時，頁面上面被隱藏掉的高度，稱為頁面被卷去的頭部。
-
滾動條在滾動時會觸發 onscroll 事件。
案例——固定右側側邊欄：
-
原先側邊欄是絕對定位
-
當頁面滾動到一定位置，側邊欄改為固定定位
-
頁面繼續滾動，會讓 返回頂部顯示出來
效果展示：
實現代碼：
<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">頭部區域</div> <div class="banner w">banner區域</div> <div class="main w">主體部分</div> <script> var sliderbar = document.querySelector('.slider-bar'); var banner = document.querySelector('.banner'); var bannerTop = banner.offsetTop var sliderbarTop = sliderbar.offsetTop - bannerTop; var main = document.querySelector('.main'); var goBack = document.querySelector('.goBack'); var mainTop = main.offsetTop; document.addEventListener('scroll', function() { if (window.pageYOffset >= bannerTop) { sliderbar.style.position = 'fixed'; sliderbar.style.top = sliderbarTop + 'px'; } else { sliderbar.style.position = 'absolute'; sliderbar.style.top = '300px'; } 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
三大系列作用區別：
它們主要用法：
|
系列
|
作用
|
屬性
|
|
offset
|
用于獲得元素位置
|
offsetLeft offsetTop
|
|
client
|
用于獲取元素大小
|
clientWidth clientHeight
|
|
scroll
|
用于獲取滾動距離
|
scrollTop scrollLeft
|
注意：頁面滾動的距離通過 window.pageXOffset 獲得
動畫原理
核心原理：通過定時器 setInterval() 不斷移動盒子位置
實現步驟：
-
獲得盒子當前位置
-
讓盒子在當前位置加上1個移動距離
-
利用定時器不斷重復這個操作
-
加一個結束定時器的條件
-
注意此元素需要添加定位，才能使用 element.style.left
簡單動畫函數封裝：
function animate(obj, target) { var timer = setInterval(function() { if (obj.offsetLeft >= target) { clearInterval(timer); } obj.style.left = obj.offsetLeft + 1 + 'px'; }, 30); }
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
緩動效果原理：
緩動動畫就是讓元素運動速度有所變化，最常見的是讓速度慢慢停下來
-
讓盒子每次移動的距離慢慢變小，速度就會慢慢落下來。
-
核心算法： (目標值 - 現在的位置 ) / 10 做為每次移動的距離步長
-
停止的條件是： 讓當前盒子位置等于目標位置就停止定時器
-
注意步長值需要取整
function animate(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function() { var step = (target - obj.offsetLeft) / 10; if (obj.offsetLeft == target) { clearInterval(obj.timer); } 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
多個目標值之間移動：
當開始移動時候，判斷步長是正值還是負值
-
如果是正值，則步長 往大了取整
-
如果是負值，則步長 向小了取整
動畫函數封裝到單獨JS文件： animate.js
function animate(obj, target, callback) { clearInterval(obj.timer); obj.timer = setInterval(function() { var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { clearInterval(obj.timer); callback && callback(); } obj.style.left = obj.offsetLeft + step + 'px'; }, 15); }
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
