所属分类:web前端开发
方法一:
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视频教程!
相关推荐:
php公益培训视频教程
HTML5图文教程
HTML5在线手册
html5特效代码大全
以上就是H5上滑跳转页面的实现(代码实例)的详细内容,更多请关注zzsucai.com其它相关文章!