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");
  • 相关阅读:
    csharp: Speech
    软件定义网络基础---OF-Config协议
    软件定义网络基础---OpenFlow协议
    软件定义网络基础---南向接口协议概述
    Win10+Ubuntu18.04安装双系统
    软件定义网络基础---OpenFlow流表
    软件定义网络基础---OpenFlow概述
    软件定义网络基础---SDN数据平面
    软件定义网络基础---SDN的核心思想
    软件定义网络基础---SDN的主流构架
  • 原文地址:https://www.cnblogs.com/yangshangjin/p/7009473.html
Copyright © 2011-2022 走看看