前端攻城狮---css3之触摸事件

基础

其实移动端也能响应click，只不过响应的比较慢，一般移动端都是用touch事件。

touch事件一般有三个

• touchstart ：当手指触摸屏幕的回调，即使是一只手指头。
• touchmove：手指在屏幕上滑动时触发。
• touchend：当手指从屏幕上移开时触发。

给元素绑定触摸事件，使用dom2级方法绑定

obj.addEventListener("touchstart",function(event){},false);

---

我们来看看具体的回调信息。

         document.addEventListener("touchstart",function(event){
         	console.log("start",event);
         },false);  

首先event是一个对象，我们主要来看看event的一个属性touches

其实touches是一个数组，数组的长度表示的是触摸屏幕手指的数量，这里是一根手指头，所以数组是1，那么我们来分析一下里面重要的参数的意义。

client：触摸手指头相对于视口顶部的距离

page：表示触摸手指头距离页面顶部的距离

screen：表示触摸手指头距离显示器顶部的距离

---

小demo

那么结合着触发事件，我们来做一个拖动的小demo

---

实战1：轮播图(js版本)

效果如下

可以看成上面的模型，首先我们需要利用绝对定位，让每一个li脱标，通过left/right去控制last，now，next显示对应的图片。最开始用户第一眼所见到的当然是第一张页面，当用户向左滑动时，now、next将会向左滑动手势的距离，若滑动的距离大于我们的所规定的最小滑动距离，则释放手势的时候页面继续滑动，直至滑动到屏幕的宽度的距离，那么此时的last就是第一张页面，now就是第二章页面，next就是第三章页面。

第一步，编写基本逻辑，通过循环让轮播图动起来

	
	
	
	


	

            

                

                

                

                

                

            
    
    asdasdasdasd
    

其实就是通过css3的动画属性 transform和transition去实现

第二步，结合手势去实现滑动翻页的效果

主要逻辑就是在touchstart touchmove touchend 中去处理对应的事件

首先touchstart，去获取第一次点击屏幕的位置和时间，用于后面touchend中判断还滑动距离是否有效，并且要初始化transition

接着touchmove，通过滑动过程中获取到的位置-初始位置计算出滑动的距离，动态的修改从而实现滑动到效果。

最后touchend，当滑动距离大于屏幕的一半，并且滑动时间大于300ms，我们视为是一次有效的滑动，从而去翻页，若无效则回到未滑动时的位置。

实战2：轮播图(jquery版本)

jquery版本的设计思路有些不同，可看下图

no.1 no.2表示的是第几章轮播图，结构很简单就是一个ul下面有6个li，设置li左浮动，我们都知道如果超出了父亲的宽度会换行，所以我们需要通过给ul设置6个屏幕的宽度的宽度，然后通过控制left，去实现动画。

第一步，先实现循环

 

第二部，根据手势去完善轮播图

本章节目标已完成，接下来会讲解node，如有表达错的请谅解，并请提出指出，且修改错误，望能共同进步。