移动Web特效开发

一、移动上的事件

1.触摸事件

常用触摸事件

事件	描述
touchstart	手指刚接触屏幕时触发
touchmove	手指在屏幕上移动时触发
touchend	手指从屏幕上移开时触发
touchcancel	当系统停止跟踪触摸的时候触发

实例

span.addEventListener('touchstart',function(){
div.style.display="block";
},false);

addEventListener是一个侦听事件并处理相应事件的函数。一般有三个参数：第一个是事件的类型，第二个是侦听到事件后处理事件的函数，第三个是事件捕获（只有两个值，true或false（为true优先触发自己的，false优先触发别的））。

除了常用的DOM属性，触摸事件还包括下列三个用于跟踪触摸的属性：

touches:表示当前跟踪的触摸操作的touch对象的数组。
1.当一个手指在触屏上时，event.touches.length=1。
2.当两个手指在触屏上时，event.touches.length=2。以此类推

changedTouches:导致触摸事件被触发的触摸点数组。

targetTouches:特定于事件目标的touch对象数组。

触摸事件坐标

属性	描述
clicntX	触摸目标在视口中的X坐标
clientY	触摸目标在视口中的Y坐标
identfier	标识触摸的唯一ID
pageX	触摸目标在页面中的X坐标
pageY	触摸目标在页面中的Y坐标
screenX	触摸目标在屏幕中的X坐标
screenY	触摸目标在屏幕中的Y坐标
target	触摸的DOM节点目标

表中这些属性的使用方法如下代码所示：

//如果需要，用pageX或pageY代替clientX或clientY
var touch = e.changedTouches[0];
var coorX=touch.clientX;
var coorY=touch.clientY;
}

clientX/Y和pageX/Y的区别在于，前者相对于视觉视口的左上角，后者相对于布局视口的左上角，布局视口是可以滚动的。具体用在那组坐标取决于想做什么。

二、Zepto框架

1.Zepto概述

Zepto.js是一个轻量的js库，它与jQuery有类似的API。
zepto的设计目的是不到10K的通用库，快速下载，有一个熟悉的api-->精力专注在开发上。
流行起来的原因：轻量；只支持现代浏览器；非常方便的搭配其他框架（phoneGap）来编写代码；优秀的源代码，性能良好。
zepto和jQuery的对比：
浏览器兼容：zepto偏移动端，jQuery偏PC端；
文件大小：zepto 10k　　jQuery 30k ；
部分API接口：参数和执行结果有可能不一致；

生态圈：jQuery更好；
核心库：zepto核心库的性能要比jQuery优秀；

2.Zepto和jQuery的区别

2-1

正对移动端程序，Zepto有一些基本的触摸事件可以用来坐触摸屏交互，Zepto不支持IE浏览器。

2-2

Dom操作的区别：添加id时jQuery不会生效，而Zepto会生效。

2-3

事件触发的区别：使用 jQuery 时 load 事件的处理函数不会执行；使用 Zepto 时 load 事件的处理函数会执行。

2-4

事件委托的区别：在Zepto中，当a被点击后，依次弹出了内容为”a事件“和”b事件“，说明虽然事件委托在.a上可是却也触发了.b上的委托。但是在 jQuery 中只会触发.a上面的委托弹出”a事件“。Zepto中，document上所有的click委托事件都依次放入到一个队列中，点击的时候先看当前元素是不是.a，符合则执行，然后查看是不是.b，符合则执行。而在jQuery中，document上委托了2个click事件，点击后通过选择符进行匹配，执行相应元素的委托事件。

2-5

width()和height()的区别：Zepto由盒模型(box-sizing)决定，用.width()返回赋值的width，用.css('width')返回加border等的结果；jQuery会忽略盒模型，始终返回内容区域的宽/高(不包含padding、border)。

2-6

offset()的区别：Zepto返回{top,left,width,height}；jQuery返回{width,height}。

2-7

Zepto无法获取隐藏元素宽高，jQuery 可以。

2-8

Zepto中没有为原型定义extend方法而jQuery有。

2-9

Zepto 的each 方法只能遍历 数组，不能遍历JSON对象。

2-10

Zepto在操作dom的selected和checked属性时尽量使用prop方法，在读取属性值的情况下优先于attr。Zepto获取select元素的选中option不能用类似jQuery的方法（美元符号）('option[selected]'),因为selected属性不是css的标准属性。应该使用（美元符号）('option').not(function(){ return !this.selected })。

3.Zepyo常用的方法和属性

3-1.$()

通过执行css选择器包装dom节点，创建元素或者从一个html片段来创建一个Zepto对像。
Zepto集合是一个类似数组的对象，它具有链式方法来操作它指向的dom。除了--（美元符号）对象上的直接方法外(如:extend)，文档对象中的所有方法都是集合方法。

如果选择器中存在content参数(css选择器、dom或者Zepto集合对象)，那么旨在所给的节点背景下进行css选择器；这个功能有点像使用（美元符号）(context).find(selector)。
可以通过一个html字符串片段来创建一个dom节点。也可以通过给定一组属性映射来创建节点。最快的创建元素时使用<div>或<div/>形式。

3-2.addClass

addClass(name)
为每个匹配的元素添加指定的class类名，多个class类名通过空格分隔。

3-3.attr

attr(name)
attr(name, value)
attr(name, function(index, oldValue){...})
attr({name:value,name2:value2,...})

读取或设置dom的属性。如果没有给定value参数，则读取Zepto对象集合第一个元素属性值。当给定了value参数，则设置Zepto对象集合中所有元素的属性值。当value参数为null，那么这个属性将被移除（类似removeAttr），多个属性以通过对象值的方式进行设置。

3-4.has

has(selector)
has(node)

判断当前Zepto对象集合的子元素是否有符合选择器的元素，或者是否包含指定的dom节点，如果有，则返回新的Zepto集合对象，该对象过滤掉不含有选择器匹配元素或者不含有指定dom节点的对象。

$('ol>li').has('a[href]')

3-5.hasClass

hasClass(name)

检查Zepto对象集合中是否含有指定元素的class，代码如下所示。

  <ul>
    <li>list item 1</li>
    <li class="liTwo">list item 2</li>
    <li>list item 3</li>
  </ul>
  <p>a paragrapg</p>
  <script>
    $("li").hasClass("liTwo");      //=>  true
  </script>

3-6.toggle

toggle([setting])

显示或隐藏。如果setting为true，相当于show方法；如果setting为false，相当于hide方法。

var input=$('input[type=text]')
$('#too_long').toggle(input.val().length>140)

3-7.toggleClass

1(names, [setting])

在匹配的元素集合中的每个元素上添加或删除一个或多个样式类。如果class的名称存在，则删除它；如果不存在则添加它。如果setting的值为真，这个功能类似于addClass；如果为假，这个功能类似与removeClass。

3-8.closest

closest(selector, [context])
closest(collection)
closest(element)

从元素本身开始，主机向上级元素匹配，并返回最先匹配selector的祖先元素。如果context节点参数存在，那么只考虑节点的后代。这个方法与parents(selector
)有点想象，但它只返回最先匹配的祖先元素。

4.Zepto独有特性

4-1.CSS transform

translate(X|Y|Z|3d)
rotate(X|Y|Z|3d)
scale(X|Y|Z)
skew(X|Y)

4-2.touch

由于在移动端，触摸事件肯定时必不可少的，因此Zepto也专门提供了几个触摸事件。

4-2-1.tap

元素被触摸的时候触发

4-2-2.singleTap and doubleTap

这一对事件可以用来检测元素上的单击和双击（如果不需要检测则用tap代替）

4-2-3.longTap

当一个元素被按住超过750ms时触发。

4-2-4.swipe,swipeLeft,swipeRight,swipeUp,swipeDown

当元素被划过时触发（可以给定位方向）