关于滑动事件

我写了手机滑动的两个方法 一个是向上滑动，一个是向下滑动

  //向上滚动
    function slideUps(obj){
        var startX,//触摸时的坐标
                startY,
                x, //滑动的距离
                y,
                aboveY=0;
        //设一个全局变量记录上一次内部块滑动的位置

        //滑动开始
        //    console.log($(".max_a"));
        var objs=document.querySelector(obj+"_01");
        //console.log(max_a);
        //滑动开始
        objs.addEventListener("touchstart", function (e) {
//        console.log(e);
            var touch = e.touches[0];
            startY=touch.pageY;
//        console.log(startX);
        });
        //滑动事件
        objs.addEventListener("touchmove",function(e){
            var touch= e.touches[0];
            y=touch.pageY-startY;//滑动距离
//            console.log(y);
        })
        //滑动结束时判断向上滑动还是向下滑动
        objs.addEventListener("touchend",function(){
            if(y<-50){
//            console.log($(".first_page"));
                $(obj+"_01").slideUp("slow");
                $(obj+"_02").slideDown("slow");
            }
        })
    }
    slideUps(".page");//调用的时候传入对象即可
    //向下滚动
    function  slideDowns(obj){
        var startX,//触摸时的坐标
                startY,
                x, //滑动的距离
                y,
                aboveY=0;
        //设一个全局变量记录上一次内部块滑动的位置
        var objs=document.querySelector(obj+"_02");
        objs.addEventListener("touchstart", function (e) {
            //console.log(e);
            var touch = e.touches[0];
            startY=touch.pageY;
            //console.log(startX);
        });
        //滑动事件
        objs.addEventListener("touchmove",function(e){
            var touch= e.touches[0];
            y=touch.pageY-startY;//滑动距离
            //console.log(y);
        })
        //滑动结束时判断向上滑动还是向下滑动
        objs.addEventListener("touchend",function(){
            if(y>50){
//            console.log($(".first_page"));
                $(obj+"_01").slideDown("slow");
                $(obj+"_02").slideUp("slow");
            }
        })
    }
    slideDowns(".page");

转载于:https://www.cnblogs.com/yangshangjin/p/7009473.html