移动端网页特效

触摸事件

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>

移动端经常使用开发框架