本文摘自PHP中文网,作者青灯夜游,侵删。
本文给大家介绍H5上滑跳转页面的实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。方法一:
jquery方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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' ;
}
});
}
|
方法二:
原生方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | var strat,move,num;
p_demo.addEventListener( "touchstart" , function (e){
console.log( "触摸开始" )
start = e.touches[0].pageY;
console.log(start)
})
p_demo.addEventListener( "touchmove" , function (e){
console.log( "触摸移动" )
move = e.touches[0].pageY;
console.log(move)
})
p_demo.addEventListener( "touchend" , function (e){
console.log( "触摸结束" )
num = start - move ;
if (num>15){
location.href= "main.html"
}
})
|
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问Html5视频教程,jQuery视频教程!
相关推荐:
php公益培训视频教程
HTML5图文教程
HTML5在线手册
html5特效代码大全
以上就是H5上滑跳转页面的实现(代码实例)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html5中在用户可以开始播放视频/音频时触发的事件oncanplay
html5规定元素是否可拖动的属性draggable
几个很好用的html5移动开发框架
什么是html5?html5使用详解
详细介绍html5中的新事件
使用html5捕捉音频与视频信息概述及实例
html5的video标签操作视频详解
浅谈html5和html4之间的不同
html5制作查询页面实例
深入了解h5中history特性--pushstate、replacestate
更多相关阅读请进入《h5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » H5上滑跳转页面的实现(代码实例)