可想写一个Touch滑动效果呢？(一)

前言
为什么要写这个的一个库?
在我们移动开发中，屏幕滑动的交互已 经是不可缺少的了，有人会说互联网上有的是这种插件，为什么还要去写呢！是的，确实很多，但能自定义的几乎没有，我们每一个项目不可能都是一样的效果，一样的滑动！不要忘记了有那认为我们程序员都是无所不能的项目负责人在！是的，本人就是遇到了一些问题无法用现成的去做！刚开始本来去修改zepto.js的touch插件！后来想了想还不如自己去写一个，又可以学习到这方面的知识，也可巩固下知识点！
正文
目前先上实现了滑动基本功能的代码吧！以后继续更新封装简易的函数

    //新建一个手势对象
(function(){
    var TIME = 0,//记录触摸的时间
    TIMESPACE = 150, //用户最短的触摸时间间隔 防止过快操作
    STIME = '0', //记录用户触摸的开始时间
    FLAG = false; //判断是否启动150毫秒延迟 默认为不执行
    function Touches(arg){
            //重置参数
            arg.obj === undefined ? this.obj = window : this.obj = arg.obj;   
            arg.movefn === undefined ? this.movefn = function(){} : this.movefn = arg.movefn;
            arg.endfn === undefined ? this.endfn = function(){} : this.endfn = arg.endfn; 
            arg.movefn === undefined ? FLAG = true : FLAG = false;  
            this.direction ='null';    //方向
            this.lengthes ={
                'x':'',
                'y':''
            };    //原点到末位置距离
            this.mlengthes ={
                'x':'',
                'y':''
            };   //实时移动的距离
            this.page = {
                 'x':'',
                 'y':'' 
             }   //初始位置 
            this.cpage ={
                'x':'',
                'y':'',
            } ;  //末位置
            this.touchinit()
        }
        Touches.prototype.start=function(e,_this){
            var e=e || window.e,
            _this =_this,
            touch=e.touches[0],
            pagex = touch.pageX, 
            pagey = touch.pageY; 
            STIME = new Date().getTime();            //记录触摸的时间戳
            this.direction ='null';    //重置方向
            _this.page.x = _this.cpage.x = pagex;      //初始/末 X位置
            _this.page.y = _this.cpage.y = pagey;      //初始y/末位置
        }
        Touches.prototype.move=function(e,_this){
            var e=e || window.eventnt;
            var _this =_this;
            var touch=e.touches[0];
            e.preventDefault();     //取消默认行为 防止页面滚动
            var cpagex = touch.pageX;  
            var cpagey = touch.pageY; 
            var mlengthesx = _this.cpage.x-cpagex;
            var mlengthesy = _this.cpage.y-cpagey;
            var endpagex = _this.cpage.x - _this.page.x;
            var endpagey = _this.cpage.y - _this.page.y;
            _this.cpage.x = cpagex;      //移动X位置
            _this.cpage.y = cpagey;     //移动y位置
            _this.mlengthes.x = mlengthesx;      //实时移动X的距离
            _this.mlengthes.y = mlengthesy;     //实时移动y的距离
            _this.lengthes.x = endpagex;    //x的移动距离
            _this.lengthes.y = endpagey;    //y的移动距离

            _this.movefn();
        }
        Touches.prototype.end =function(e,_this){
            TIME = new Date().getTime() - STIME;
            TIME = FLAG ? TIME : 150;
            if(TIME >= 150){
                //console.log( DATE.getTime());
                var e = e || window.e;
                var _this = _this;
                //判断用户的手势方向 加-号换成第一象限
                var tan = -this.lengthes['y']/this.lengthes['x'],
                x=this.lengthes['x'],
                y=-this.lengthes['y']; //原地为左上角 加上-号转为第一象限 方便计算
                //判断方向
                if(x >= 0 && y >= 0 ){
                    //第一象限
                    if( tan >= 0 && tan <= 1){
                        //0-45%
                     _this.direction='right';
                    }else if(tan > 1){
                        //45%-90%
                        _this.direction='top';
                    }
                }else if(x < 0 && y > 0 ){
                    //第二象限
                    if( tan < -1 ){
                        //90% - 135%
                        _this.direction='top';
                    }else if(tan <= 0 && tan >= -1){
                        //135%-180%
                        _this.direction='left';
                    }
                }else if(x < 0 && y < 0 ){
                    //第三象限
                    if(tan >= 0 && tan <= 1 ){
                        //180% - 225%
                        _this.direction='left';
                    }else if(tan > 1){
                        //225%-270%
                        _this.direction='bottom';
                    }
                }else if(x > 0 && y < 0 ){
                    //第四象限
                    if(tan <= 0 && tan >= -1 ){
                        //270% - 315%
                        _this.direction='right';
                    }else if(tan < -1){
                        //315%-360%
                        _this.direction='bottom';
                    }
                }
                _this.endfn();
            }
        }
        Touches.prototype.touchinit = function(){ 
            var _this=this;
            _this.obj.addEventListener("touchstart", function(){_this.start(event,_this)}, false);
            _this.obj.addEventListener("touchmove", function(){_this.move(event,_this)}, false);
            _this.obj.addEventListener("touchend",  function(){_this.end(event,_this)}, false);

            //_this.obj.addEventListener("onmousedown", function(){_this.start(e,_this)}, false);
            //_this.obj.addEventListener("onmousemove", function(){_this.move(e,_this)}, false);
            //_this.obj.addEventListener("onmouseup",  function(){_this.end(e,_this)}, false);
        }
        Touches.prototype.getpage =function(obj){
            //this.direction = obj;
            return this.page;
        }
        Touches.prototype.getcpage =function(obj){
            //this.direction = obj;
            return this.cpage;
        }
        Touches.prototype.getlengthes =function(obj){
            //this.direction = obj;
            return this.lengthes;
        }
        Touches.prototype.getdirection =function(obj){
            //this.direction = obj;
            return this.direction;
        }

    //alert(t.page.x)
    window.Touches = Touches;
})(window)

OK 第一节先上这块代码！有兴趣的可以先看下！
最后上一个demo 介绍下基本功能的用法
demo

手机直接扫二维码