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");
  • 相关阅读:
    swarm集群搭建 及集群维护操作
    zabbix 告警说明
    yum 下载安装包
    mongdb常见操作
    cloudera5.16.1 离线安装
    centos7 安装hadoop-3.2.1
    rpcbind 启动报错
    ingress-nginx 安装
    Dubbo学习
    mybatis防止SQL注入
  • 原文地址:https://www.cnblogs.com/yangshangjin/p/7009473.html
Copyright © 2011-2022 走看看