html5中如何自动跳转页面,实现HTML5上滑跳转页面的两种方法

方法一：

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; /*定义三个变量, 记录开始、结束距离顶部的距离*/

div_demo.addEventListener("touchstart", function (e){ /*触摸开始*/

console.log("触摸开始")

// console.log(e)

start = e.touches[0].pageY;

console.log(start) /*得出刚触屏时距离页面顶部的距离*/

})

div_demo.addEventListener("touchmove", function (e){ /*触摸移动*/

console.log("触摸移动")

// console.log(e)

move = e.touches[0].pageY;

console.log(move) /*得出触屏结束后距离页面顶部的距离*/

})

div_demo.addEventListener("touchend", function (e){ /*触摸结束*/

console.log("触摸结束")

// console.log(e)

num = start - move ; /*得出开始和结束距离页面顶部的差值*/

if(num>15){

location.href="main.html" /* 跳转到main.html */

}

})

html5中如何自动跳转页面,实现HTML5上滑跳转页面的两种方法相关推荐

手机爱奇艺html5,爱奇艺手机会员能在电视上用吗？解决的两种方法
爱奇艺手机会员能在电视上用吗?有些小伙伴喜欢在电脑上观影,这样屏幕更大,观景感更好.就有网友问能不能用爱奇艺的VIP会员在电视上播放,如果是黄金VIP的话是不能在电视上播放的,那应该如何解决?有两个方 ...
第四周作业——统计/etc/init.d/functions文件中每个单词的出现次数，并排序（用grep和sed两种方法分别实现）
统计/etc/init.d/functions文件中每个单词的出现次数,并排序(用grep和sed两种方法分别实现) 方法一:grep实现 grep -o "\<[[:alpha:]] ...
excel单元格内容拆分_Excel中把一个单元格内容拆分到多个单元格内的两种方法...
利用时间是一个极其高级的规律.--恩格斯今天给大家分享的是关于数据拆分的小技巧,什么意思呢? 就比如下面的表格,我想把图一的表转换为图二的表,这个要如何做呢? 今天给大家分享2种方法实现它. 方法 ...
xp系统的计算机管理中用户在哪里,计算机管理在哪里_打开XP系统计算机管理功能的两种方法...
摘要腾兴网为您分享:打开XP系统计算机管理功能的两种方法,周公解梦,招联金融,愈加,晓黑板等软件知识,以及安徽省12366,向日葵控制端和,刷火车票软件,云创通手机,faceit,美莱尔塑胶地板,杭 ...
html+轮播图下标跳转代码,最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: 最简单的轮播广告 body, div, ul, li { margin: ; padding: ; } ul { list-style-t ...
页面加载完后立刻执行JS的两种方法
方式一:window.onload: 当一个文档完全下载到浏览器中时,才会触发window.onload事件.这意味着页面上的全部元素对js而言都是可以操作的,也就是说页面上的所有元素加载完毕才会执行 ...
jquery 乱码传参_jquery获取URL中参数解决中文乱码问题的两种方法
从A页面通过url传参到B页面时,解析url参数可以用下面两种方法: 方法一:正则分析法 function getQueryString(name) { var reg = new RegExp(&q ...
html5用代码实现页面跳转页面跳转,H5上滑跳转页面的实现（代码实例）
本文给大家介绍H5上滑跳转页面的实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 方法一:movePage($('body')); function movePage(dom) ...
多个html如何套用套一个头部,Vue.js项目中管理每个页面的头部标签的两种方法...
在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title ...
两种方法判断是否为移动端访问，跳转到对应wap页面
随着移动互联网的迅猛发展,越来越多的用户选择使用移动端浏览器访问网页.当用户访问一个网站的pc端页面的时候,往往是非常影响用户体验的.我们希望当用户使用移动端浏览器访问我们的pc端网站的时候,自动跳转 ...

html5中如何自动跳转页面,实现HTML5上滑跳转页面的两种方法

html5中如何自动跳转页面,实现HTML5上滑跳转页面的两种方法相关推荐

最新文章

热门文章