webApp 移动Touch框架

WebApp 移动Touch框架

智能手机和平板电脑一类的移动设备通常会有一个电容式触摸屏（capacitive touch-sensitive screen），以捕捉用户的手指所做的交互。

随着移动网络的发展，其能够支持越来越复杂的应用，web开发者需要一种方法来处理这些事件。例如，几乎所 有的快节奏游戏都需要玩家一次按下多个按钮，这种方式，在触摸屏情况下，意味着多点触摸。

相关Touch框架

1. http://www.zeptojs.cn/#modules
2. http://touch.code.baidu.com/
3. http://touch.code.baidu.com/examples.html

Zepto touch框架使用

API: http://www.zeptojs.cn/#modules

第一步： 设置viewport

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

第二步： 通过bower安装zepto.js,touch.js 到项目目录中

 bower install zepto.js

第三步： 下载 zepto.touch.js

https://github.com/madrobby/zepto/blob/master/src/touch.js#files

第四步: 引用zepto.js,touch.js文件到应用中

<script src="../libs/zepto.js/dist/zepto.js"></script>
<script src="../libs/zepto.js/src/touch.js"></script>

第五步: 使用zepto.js的手势

<script>
(function(){
   
    var index =0; //索引
    var btns = $(".pageNums span").length;
    $(".picList").swipeLeft(function(){
        index++;
        if(index >=btns-1){
            index = btns-1;
        }
        var dis = -index * window.screen.width;
        $(".picList").css({"transition":"1s linear"});
        $(".picList").css({"transform":"translateX("+dis+"px)"});

        $(".pageNums span").removeClass("active").eq(index).addClass("active");

    }).swipeRight(function(){
        index--;
        if(index <0){
            index =0;
        }
        var dis = -index * window.screen.width;
        $(".picList").css({"transition":"1s linear"});
        $(".picList").css({"transform":"translateX("+dis+"px)"});

        $(".pageNums span").removeClass("active").eq(index).addClass("active");

    })

})()
</script>