您现在的位置是:群英 > 开发技术 > web开发
H5中如何写跳转页面,有哪些方法
Admin发表于 2022-06-24 17:56:452420 次浏览
这篇文章主要为大家详细介绍了H5中如何写跳转页面,有哪些方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望对大家学习或工作能有帮助。


本文给大家介绍H5上滑跳转页面的实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

方法一:

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; /*定义三个变量, 记录开始、结束距离顶部的距离*/
     p_demo.addEventListener("touchstart", function (e){        /*触摸开始*/
            console.log("触摸开始")
            // console.log(e)
            start = e.touches[0].pageY;
            console.log(start)       /*得出刚触屏时距离页面顶部的距离*/
      })
     p_demo.addEventListener("touchmove", function (e){       /*触摸移动*/
            console.log("触摸移动")
            // console.log(e)
            move = e.touches[0].pageY;
            console.log(move)     /*得出触屏结束后距离页面顶部的距离*/
    }) 
   p_demo.addEventListener("touchend", function (e){            /*触摸结束*/
            console.log("触摸结束")
            // console.log(e)
            num = start - move ;   /*得出开始和结束距离页面顶部的差值*/
            if(num>15){
                 location.href="main.html"           /* 跳转到main.html */
            }
    })



关于“H5中如何写跳转页面,有哪些方法”的内容就介绍到这,感谢各位的阅读,相信大家对H5中如何写跳转页面,有哪些方法已经有了进一步的了解。大家如果还想学习更多知识,欢迎关注群英网络,小编将为大家输出更多高质量的实用文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: H5跳转页面
相关信息推荐
2022-07-06 17:31:54 
摘要:这篇文章主要介绍了Go 中闭包的底层原理,闭包的基本原理是一种现象,一个函数内引用了外部的局部变量的现象,带着些许的了解和小编一起进入文章正题学习
2022-09-05 17:44:46 
摘要:这篇文章主要介绍了thinkphp5.1框架模板赋值与变量输出,结合实例形式分析了thinkphp5.1框架模板赋值与变量输出基本操作技巧及相关注意事项,需要的朋友可以参考下
2022-07-14 17:15:13 
摘要:本篇文章给大家带来了关于PHP的相关知识,其中主要介绍了关于排序功能的相关问题,通过实例完成php+mysqli排序功能的实现,下面一起来看一下,希望对大家有帮助。
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部