H5上滑跳转页面的实现(代码实例)-
发布时间:09/01 来源:未知 浏览:
关键词:
办法一:
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 */ } })
总结:以上就是本篇文的全部内容,但愿能对大家的学习有所帮忙。更多相干教程请拜访Html5视频教程,jQuery视频教程!