移動端網頁特效

觸摸事件

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元素上的手指的一個列表
changedTouches	手指狀態發生了改變的列表，從無到有，從有到無變化

 

 

 

 

由於平時咱們都是給元素註冊觸摸事件，因此重點記住targetTouches。

1.3移動端拖動元素

1.touchstart、touchmove、touchend能夠實現拖動元素。

2.可是拖動元素須要當前手指的座標值，咱們可使用targetTouches[0]裏面的pageX和pageY。

3.移動端拖動的原理: 手指移動中，計算出手指移動的距離。而後利用盒子原來的位置+手指移動的距離。

4.手指移動的距離： 手指滑動中的位置減去手指剛開始觸摸的位置。

拖動元素三部曲：

（1）觸摸元素touchstart： 獲取手指初始座標，同時得到盒子原來的位置。

（2）移動手指touchmove： 計算手指的滑動距離，而且移動盒子

（3）離開手指touchend；

注意：手指移動也會觸發滾動屏幕，因此這裏要阻止默認的屏幕滾動e.preventDefault()

移動端常見特效

移動端輪播圖：

 1 window.addEventListener('load', function() {
 2   // 1.獲取元素
 3   var focus = document.querySelector('.focus');
 4   var ul = focus.children[0];
 5   // 獲取focus的寬度
 6   var w = focus.offsetWidth;
 7   var ol = focus.children[1];
 8   // 2.利用定時器自動播放輪播圖圖片
 9   var index = 0;
10   var timer = setInterval(function() {
11     index++;
12     var translateX = -index * w;
13     ul.style.transition = 'all 0.3s';
14     ul.style.transform = 'translateX(' + translateX + 'px)';
15   }, 2000);
16   // 等着咱們過渡完成以後，再去判斷，監聽過渡完成的事件 transitionend
17   ul.addEventListener('transitionend', function() {
18     // 無縫滾動
19     if(index>= 3) {
20       index = 0;
21       // 去掉過渡效果， 這樣讓咱們的ul，快速的跳到目標位置
22       ul.style.transition = 'none';
23       // 利用最新的索引號乘以寬度 去滾動圖片
24       var translatex = -index * w;
25       ul.style.transform = 'translateX(' + translatex + 'px)';
26     } else if ( index < 0) {
27       index = 2;
28       ul.style.transition = 'none';
29       // 利用最新的索引號乘以寬度 去滾動圖片
30       var translatex = -index * w;
31       ul.style.transform = 'translateX(' + translatex + 'px)';
32     }
33     // 3. 小圓點跟隨變化
34     // 把ol裏面li帶有current類名的選出來去掉類名 remove
35     ol.querySelector('.current').classList.remove('current');
36     // 讓當前索引號的小li 加上current add
37     ol.children[index].classList.add('current');
38   });
39   // 4.手指滑動輪播圖
40   // 觸摸元素 touchstart：獲取手指初始座標
41   var startX = 0;
42   var moveX = 0;
43   var flag = false;
44   ul.addEventListener('touchstart', function(e) {
45     startX = e.targetTouches[0].pageX;
46     // 手指觸摸的時候
47     clearInterval(timer);
48   });
49   // 移動手指touchmove：計算手指的滑動距離，而且移動盒子
50   ul.addEventListener('touchmove', function(e) {
51     // 計算移動距離
52     moveX = e.targetTouches[0].pageX - startX;
53     // 移動盒子， 盒子原來的位置 + 手指移動的距離
54     var translatex = -index * w + moveX;
55     // 手指拖動的時候，不須要動畫效果
56     ul.style.transition = 'none';
57     ul.style.transform = 'translateX(' + translatex + 'px)';
58     flag = true; // 若是用戶手指移動過咱們再去判斷不然不作判斷效果
59     e.preventDefault(); // 阻止滾動屏幕的行爲
60   });
61   // 手指離開， 根據移動距離去判斷是回彈仍是播放上一張下一張
62   ul.addEventListener('touchend', function(e) {
63     if(flag) {
64       // (1)若是移動距離大於50像素，咱們就播放上一張或者下一張
65       if(Math.abs(moveX) > 50) {
66         // 若是是右滑，就是 播放上一張，moveX是正值
67         if(moveX > 0) {
68           index--;
69         } else {
70           index++;
71         }
72         var translatex = -index * w;
73         ul.style.transition = 'all 0.3s';
74         ul.style.transform = 'translateX(' + translatex + 'px)';
75       } else {
76         var translatex = -index * w;
77         ul.style.transition = 'all 0.1s';
78         ul.style.transform = 'translateX(' + translatex + 'px)';
79       }
80     }
81     // 手指離開時候從新開啓定時器
82     clearInterval(timer);
83     timer = setInterval(function() {
84       index++;
85       var translateX = -index * w;
86       ul.style.transition = 'all 0.3s';
87       ul.style.transform = 'translateX(' + translateX + 'px)';
88     }, 2000); 
89   });
90 })

移動端經常使用開發插件

 1  <div></div>
 2  <script src="fastclick.js"></script>
 3     <script>
 4         if ('addEventListener' in document) {
 5             document.addEventListener('DOMContentLoaded', function() {
 6                 FastClick.attach(document.body);
 7             }, false);
 8         }
 9         var div = document.querySelector('div');
10         div.addEventListener('click', function() {
11             alert(11);
12         })
13     </script>

移動端經常使用開發框架