zoukankan      html  css  js  c++  java
  • 关于滑动事件

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

      //向上滚动
    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");
  • 相关阅读:
    IOS知识点收集
    多媒体层预览(Media Layer OverView)
    IOS Audio开发集合
    《android 1: 创建一个安卓项目》
    IOS 中的CoreImage框架(framework)
    [转载]面向对象的六大原则
    [转载]UDP丢包率提升
    产品与项目的区别
    关联、组合、聚合、依赖关系比较
    统一建模语言(UML,Unified Modeling Language)
  • 原文地址:https://www.cnblogs.com/yangshangjin/p/7009473.html
Copyright © 2011-2022 走看看