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.pswp.cn/news/534412.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/534412.shtml
英文地址,請注明出處:http://en.pswp.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、請同學們完成好自己的…

計算機輔助抗體設計,計算機輔助設計提高單克隆抗體親和力的研究

摘要:增強抗體親和力對于提高其檢測靈敏度,延長解離時間,降低藥物使用劑量和增強藥效都具有非常重要的意義.到目前為止,提高抗體親和力的方法主要是以原親本單抗為改造模板,通過構建其突變體抗體庫(如核糖體展示,酵母雙雜交,噬菌體展示抗體庫等)進行篩選,最終獲得更…