html5頁面左右滑動是怎么實現的？

左右滑動是由觸摸事件定義的，觸摸事件(touch)會在用戶手指放在屏幕上面的時候、在屏幕上滑動的時候或者是從屏幕上移開的時候觸發。下面具體說明：

創新互聯建站，專注為中小企業提供官網建設、營銷型網站制作、響應式網站開發、展示型成都做網站、網站設計等服務，幫助中小企業通過網站體現價值、有效益。幫助企業快速建站、解決網站建設與網站營銷推廣問題。

touchstart事件：當手指觸摸屏幕時候觸發，即使已經有一個手指放在屏幕上也會觸發。

touchmove事件：當手指在屏幕上滑動的時候連續地觸發。在這個事件發生期間，調用preventDefault()事件可以阻止滾動。

touchend事件：當手指從屏幕上離開的時候觸發。

touchcancel事件：當系統停止跟蹤觸摸的時候觸發。關于這個事件的確切出發時間，文檔中并沒有具體說明，咱們只能去猜測了。

上面的這些事件都會冒泡，也都可以取消。雖然這些觸摸事件沒有在DOM規范中定義，但是它們卻是以兼容DOM的方式實現的。所以，每個觸摸事件的event對象都提供了在鼠標實踐中常見的屬性：bubbles(起泡事件的類型)、cancelable(是否用 preventDefault() 方法可以取消與事件關聯的默認動作)、clientX(返回當事件被觸發時，鼠標指針的水平坐標)、clientY(返回當事件觸發時，鼠標指針的垂直坐標)、screenX(當某個事件被觸發時，鼠標指針的水平坐標)和screenY(返回當某個事件被觸發時，鼠標指針的垂直坐標)。除了常見的DOM屬性，觸摸事件還包含下面三個用于跟蹤觸摸的屬性。

touches：表示當前跟蹤的觸摸操作的touch對象的數組。

targetTouches：特定于事件目標的Touch對象的數組。

changeTouches：表示自上次觸摸以來發生了什么改變的Touch對象的數組。

每個Touch對象包含的屬性如下。

clientX：觸摸目標在視口中的x坐標。

clientY：觸摸目標在視口中的y坐標。

identifier：標識觸摸的唯一ID。

pageX：觸摸目標在頁面中的x坐標。

pageY：觸摸目標在頁面中的y坐標。

screenX：觸摸目標在屏幕中的x坐標。

screenY：觸摸目標在屏幕中的y坐標。

target：觸目的DOM節點目標。

舉個例子-JavaScript代碼：

function?load?(){

document.addEventListener('touchstart',touch,?false);

document.addEventListener('touchmove',touch,?false);

document.addEventListener('touchend',touch,?false);

function?touch?(event){

var?event?=?event?||?window.event;

var?oInp?=?document.getElementById("inp");

switch(event.type){

case?"touchstart":

oInp.innerHTML?=?"Touch?started?("?+?event.touches[0].clientX?+?","?+?event.touches[0].clientY?+?")";

break;

case?"touchend":

oInp.innerHTML?=?"brTouch?end?("?+?event.changedTouches[0].clientX?+?","?+?event.changedTouches[0].clientY?+?")";

break;

case?"touchmove":

event.preventDefault();

oInp.innerHTML?=?"brTouch?moved?("?+?event.touches[0].clientX?+?","?+?event.touches[0].clientY?+?")";

break;

}

}

}

window.addEventListener('load',load,?false);

HTML代碼：

div?id="inp"/div

上面的小例子當touchstart事件觸發的時候，會將觸摸的位置更新到div標簽中。當touchmove事件觸發的時候，會默認行為的滾動

(觸摸移動的默認行為是滾動頁面)，然后觸摸操作的變化信息更新到div標簽中。而touchend事件會輸出有關觸摸操作的最終信息。注意，在

touchend事件觸發的時候，touches集合中就沒有任何Touch對象了，因為不存在活動的觸摸操作。

這些事件會在文檔的所有元素上面觸發，因而可以分別操作頁面的不同部分。在觸摸屏幕上的元素，這些事件(包括鼠標事件)發生的順序如下：

(1)touchstart

(2)mouseover

(3)mousemove(一次)

(4)mousedown

(5)mouseup

(6)click

(7)touchend

《HTML5觸摸界面設計與開發》pdf下載在線閱讀全文，求百度網盤云資源

《HTML5觸摸界面設計與開發》百度網盤pdf最新全集下載:

鏈接:

?pwd=iwda 提取碼: iwda

簡介：本書專注于觸摸界面的開發，內容結構和優化網站思路大概一致。上半部分涵蓋了能使各種網站，特別是移動網站變快的基本概念。第2章和第3章告訴你如何創建一個簡單的網站，并使其加載速度快。第4章可以幫助你使用緩存來提高用戶再次訪問時的速度。第5章是關于要摒棄一次性的頁面加載方式和重構應用程序以使實際上和感覺到的性能都達到最優的。書的后半部分是專門講觸摸界面的，特別是盡可能地讓它們更平穩和快速。本書適合具有一定經驗的Web開發者閱讀參考。 ?

WAP網站，3G網站，html5觸屏版有什么區別？

1、手機網站一般又稱作WAP網站 , 而傳統網站又稱作Web網站，WAP網站可分為WAP1.X和WAP2.0網站。WAP1.X功能簡單、界面粗糙,而WAP2.0的手機網站功能和界面都與Web網站相接近。WAP2.0的手機網站可以在電腦上直接用瀏覽器訪問，而WAP1.X的網站，需要模擬器或者給瀏覽器安裝相應的插件方可。

2、3G網站是手機網站領域為迎合3G的推廣而創造的概念，3G網站就是手機WAP網站。3G網站采用wap2.0編寫，支持一些xhtml和CSS。

3、html5觸屏版主要針對高端智能手機，可以給用戶呈現華麗的網頁視覺效果。HTML5觸屏版采用最新的技術HTML5編寫，屬于智能機時代產物，因為智能手機的性能已經很強大了，可以直接加載html。

怎么制作html5手機頁面？

1、打開百度，在百度上搜索：易企秀，然后點擊搜索，在搜索的結果中點擊進入易企秀的官方網站。

2、進入后，先登錄自己的賬號，可以直接用QQ微信登錄即可，登錄后就可以開始制作自己的手機網頁微場景了。

3、首先點擊【我的場景】接著點擊【制作場景】，接著會進入場景模板選擇界面，里面有很多免費的模板。

4、可以在模板中心選擇一個自己需要的點擊，直接套用模板，也可以選擇自己創建一個空白頁面。

5、進入后就可以根據自己的需要，將模板里面的文字圖片和音樂替換成自己需要的即可，如圖所示。

6、還可以給自己的手機網頁添加背景音樂，動畫效果，跳轉鏈接，特效組件等等。

分享題目：html5觸摸界面,html5觸摸界面設計與開發
當前網址：http://vcdvsql.cn/article46/dsdgjhg.html

成都網站建設公司_創新互聯，為您提供商城網站、網站建設、品牌網站建設、自適應網站、網站排名、品牌網站設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯