本文摘自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地理位置定位功能?
html5中float属性造成的换行如何处理
有关html5服务器推送事件的讲解
html5中返回timeranges对象的属性buffered
html5视频播放的详细介绍
html5实现拖拽批量上传文件的代码
html5中当鼠标滚轮正在被滚动时运行的脚本的事件onmousewheel
h5元素/属性/格式化的详细介绍
h5history 模式的实例教程
了解一下html5中新增加的标签
更多相关阅读请进入《h5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » H5上滑跳转页面的实现(代码实例)