经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JSJS库框架 » jQuery » 查看文章
H5上滑跳转页面
来源:cnblogs  作者:牧己  时间:2018/9/26 17:53:58  对本文有异议

方法一:

   jquery方法

   movePage($('body'));

   function movePage(dom) {

       var startY, moveY, moveSpave;

       dom.on("touchstart", function(e) {

               startY = e.originalEvent.touches[0].pageY; return startY;

        });

        dom.on("touchmove", function(e) {

              moveY = e.originalEvent.touches[0].pageY;

              moveSpave = startY - moveY;

              if (moveSpave > 15) {

                   location.href = 'main.html';              /* 跳转到main.html */

               }

        });

  }

 方法二:

      原生方法  

     var strat,move,num; /*定义三个变量, 记录开始、结束距离顶部的距离*/

     div_demo.addEventListener("touchstart", function (e){        /*触摸开始*/
            console.log("触摸开始")
            // console.log(e)
            start = e.touches[0].pageY;
            console.log(start)       /*得出刚触屏时距离页面顶部的距离*/

      })

     div_demo.addEventListener("touchmove", function (e){       /*触摸移动*/
            console.log("触摸移动")
            // console.log(e)
            move = e.touches[0].pageY;
            console.log(move)     /*得出触屏结束后距离页面顶部的距离*/
    }) 

   div_demo.addEventListener("touchend", function (e){            /*触摸结束*/
            console.log("触摸结束")
            // console.log(e)
            num = start - move ;   /*得出开始和结束距离页面顶部的差值*/

            if(num>15){

                 location.href="main.html"           /* 跳转到main.html */
            }
    })

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号