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 */

}

})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/534412.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙系统hifi,Apple Music将迎来重大更新 HiFi无损音质即将上线?

原标题:Apple Music将迎来重大更新 HiFi无损音质即将上线?前不久有媒体报道称,苹果将在当地时间5月18日推出HiFi版AppleMusic服务,新服务将为Apple Music用户提供无损的流媒体音乐,满足HiFi用户对高音质的追求。而在近…

html5语义化标签 加粗,html5标签 H5标签

html>h5文本元素1.文本元素2.加粗文字 b 3.倾斜文字 i 4.删除文字 del 5.加粗文字2 strong 6.安全换行 wbr~~~ 7.强调 倾斜元素 em 8.删除线2 s元素9998 9.下划线 u 10.下划线2 ins元素 11.小号字体small元素 12.下标 sub:CH4COOH ; 上标sup:20平方米…

华为笔记本会不会用鸿蒙,华为MateBook Pro笔记本为什么不用鸿蒙操作系统HarmonyO?...

头条上整天就是各种华为啊鸿蒙啊的,搞得好像人人都见过鸿蒙一样。还是大家以为操作系统就是做个APP或者王者荣耀?据我所知,鸿蒙OS现在我们能看到的,也就是几张PPT截图吧?整天动不动,这个为啥不用鸿蒙&#…

html 复选框name值,HTML(5)表单元素以及对各个表单元素的name、value属性的理解

我在学习表单元素的时候感觉很混乱,特别是 name value这两个属性,没有真正理解它们是干什么的,所以需要梳理一下。HTML表单元素主要有 HTML5新增的表单元素有三个下面梳理一下这些表单元素的用法并指出各元素的name、value属性含义1. 元素元…

html中一张a4是多少pt,CSS设置A4纸张尺寸

我需要在网络上模拟A4纸,并允许打印此页面,因为它在浏览器上显示(特别是Chrome)。我设置元素的大小为21厘米x 29.7厘米,但当我发送打印(或打印预览)它剪辑我的页面。HTMLPage 1/2Page 2/2CSSbody {margin: 0;padding: 0;background-color: #F…

html中的异步请求数据格式,解决layui中table异步数据请求不支持自定义返回数据格式的问题...

使用版本 layui-v2.3.0修改:打开layui中table.js源码在 Class.prototype.pullData 这个方法定义内部//获得数据Class.prototype.pullData function(curr, loadIndex){var that this,options that.config,request options.request,response options.response,so…

首页图标九宫格 html5,html5九宫格布局的网格菜单代码

特效描述:html5 九宫格布局 网格菜单代码。今天我们想和大家分享一个九宫格菜单动画。这个想法的灵感来自于视频中的效果,html5全屏展开网格布局菜单,点击全屏背景切换显示代码。代码结构1. 引入CSS2. 引入JS3. HTML代码Grid MenuarrowdropTo…

html数据摘要算法,js 摘要算法 base64加密解密 以及字符串编码

js 摘要算法 base64加密解密 unescape()和escape()对字符串进行编码 encodeURI()和decodeURI()编码 encodeURIComponent()和decodeURIComponent()编码base64:双向加密方式。1.GitHub中下载base64https://github.com/dankogai/js-base642.对应的HTML中调用//加密var …

html中日期格式化函数,JavaScript日期时间格式化函数分享

这个函数经常用到,分享给大家。函数代码:Date.prototype.format function(format){var o {"M" : this.getMonth()1, //month"d" : this.getDate(), //day"h" : this.getHours(), //hour"m" : this.getMi…

苹果6怎样打开html,苹果iPhone的Safari浏览器使用技巧图解

  大多数的 iPhone 用户们都是用的 iOS 系统自带的 Safari 浏览器,不过很多用户们对 Safari 浏览器却不是很熟悉,因为 Safari 毕竟没有国产浏览器这么动我们!这厢脚本之家小编给大家介绍一些 iOS Safari 浏览器的一些你所不知道…

华为p9 html尺寸,华为P9的屏幕尺寸是多少?

华为P9的屏幕尺寸是多少华为P9的屏幕尺寸是5.2英寸。针对华为P9的屏幕尺寸是多少的问题,配置方面,华为P9搭载了麒麟955处理器,麒麟955基于台积电16nm FinFET Plus制程工艺打造,比FinFET拥有更强的性能。架构方面,麒麟9…

美国款游戏计算机,美国一程序员设计计算机游戏 悼念早逝爱子(图)

据美国《今日》网站4月25日报道,美国科罗拉多州的程序员赖安•格林(Ryan Green)设计了一款叫做“癌症:那条猛龙”的游戏,以此纪念爱子约耳(Joel)短暂的一生。2010年,1岁的约耳被诊断出患有致命的脑癌,赖安希望游戏玩家…

计算机专业知识是什么范围,计算机基础知识考题

计算机技术在我国得到了快速发展,计算机应用范围越来越广泛,普及计算机知识已迫在眉睫。那么你对计算机基础知识了解多少呢?以下是由小编整理关于的内容,希望大家喜欢!1、电子计算机主要是以***B***划分发展阶段的。A、集成电路 B、电子元件…

html json to table,javascript - HTML - Convert json to table - Stack Overflow

Im trying to convert JSON to a table, but it doesnt. Everything seems fine, but I cannot see the values ​​in my table.My code that converts JSON to table:$(function() {var my_data ;$.each(JSON.parse(sonuc.response) , function(key, item){my_data ;my_dat…

html中.inner样式,JavaScript-DOM动态控制Html标签对象样式和innerHTML、className属性

文本1//首先获取标签对象var p document.getElementById("text1");//通过对象自带的style方法设置不同的样式p.style.backgroundColor "black";p.style.fontSize "20px";//上面是给p标签设置两个样式,背景颜色和字体大小说明&…

北京科技大学计算机硕士,北京科技大学计算机专业硕士只有面授上课吗

北京科技大学计算机专业硕士比较热门,目前有意接受北京科技大学计算机专业硕士教育的学员,对其是否只有面授上课还比较疑惑。下文可供大家参考:一、只有面授上课北京科技大学计算机专业硕士只有面授上课,有周末班和集中班两种上课…

中国石油计算机文化基础答案,中国石油大学17年秋《计算机文化基础》第二次在线作业答案...

中国石油大学17年秋《计算机文化基础》第二次在线作业答案 (8页)本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!4.90 积分第二次在线作业窗体顶端单选题 (共40道题)1.(2.5分) Word不具有的功能是()。 …

计算机硬盘中病毒以后怎么办,计算机中病毒,格式化整个硬盘后还有?怎么办?...

计算机中病毒,格式化整个硬盘后还有?怎么办?來源:互聯網 2009-07-23 13:40:47 評論分類: 電腦/網絡 >> 反病毒問題描述:好象是一种播放器带来的病毒,会在开机时自动运行程序(kuzhan . kubao . IEbar . 桌面媒体 . 中文官方…

计算机兴趣班记录,计算机兴趣班活动记录.doc

计算机兴趣班活动记录计算机二课活动记录周次三应 到人 数实 到人 数缺席者及原因活动内容创作练习:设计贺卡记录人陈美馨活动过程记录1、启动“画图”软件:解说并演示启动“画图”软件的要领与操作步骤。2、解说并演示画图软件的窗口组成。3、请同学们完成好自己的…

计算机辅助抗体设计,计算机辅助设计提高单克隆抗体亲和力的研究

摘要:增强抗体亲和力对于提高其检测灵敏度,延长解离时间,降低药物使用剂量和增强药效都具有非常重要的意义.到目前为止,提高抗体亲和力的方法主要是以原亲本单抗为改造模板,通过构建其突变体抗体库(如核糖体展示,酵母双杂交,噬菌体展示抗体库等)进行筛选,最终获得更…