html5頁面左右滑動是怎么實現(xiàn)的？

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

為雙峰等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及雙峰網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、雙峰網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

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

touchmove事件：當手指在屏幕上滑動的時候連續(xù)地觸發(fā)。在這個事件發(fā)生期間，調(diào)用preventDefault()事件可以阻止?jié)L動。

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

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

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

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

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

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

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

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

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

identifier：標識觸摸的唯一ID。

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

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

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

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

target：觸目的DOM節(jié)點目標。

舉個例子-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事件觸發(fā)的時候，會將觸摸的位置更新到div標簽中。當touchmove事件觸發(fā)的時候，會默認行為的滾動

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

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

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

(1)touchstart

(2)mouseover

(3)mousemove(一次)

(4)mousedown

(5)mouseup

(6)click

(7)touchend

html5 菜單左右滑動

可以放到移動端的html5動畫切換效果

默認也可以自動切換

支持鼠標點擊拖動、滑動

將head中的樣式引入到你的樣式表中

將body中需要的代碼部分拷貝過去即可

移動端html5怎么實現(xiàn)原生tab滑動切換

　我們使用移動端時可以通過觸屏手勢左右滑動來切換TAB欄目，我們說的TAB一般由導(dǎo)航條和TAB對應(yīng)的內(nèi)容組成，切換導(dǎo)航條上的標簽同時標簽對應(yīng)的內(nèi)容也會跟著切換。

我們準備一個TAB導(dǎo)航#pagenavi，里面包含TAB導(dǎo)航要切換的四個導(dǎo)航按鈕，然后是切換的主體內(nèi)容#slider，這里應(yīng)該放置四個li與導(dǎo)航按鈕對應(yīng)，內(nèi)容自定義。

由于是移動端應(yīng)用，我們加載zepto.js，zepto就是體積小的jquery。然后需要加載觸屏滑動插件touchslider.js。

接下來我們就直接調(diào)用TouchSlider，通過設(shè)置綁定tab，滑動方向、速度、時間等信息實現(xiàn)內(nèi)容切換，請看詳細代碼：

script type="text/javascript"

var page='pagenavi';

var mslide='slider';

var mtitle='emtitle';

arrdiv = 'arrdiv';

var as=document.getElementById(page).getElementsByTagName('a');

var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:600,timeout:5000,'before':function(index){

var as=document.getElementById(this.page).getElementsByTagName('a');

as[this.p].className='';

as[index].className='active';

this.p=index;

var txt=as[index].innerText;

$("#"+this.page).parent().find('.emtitle').text(txt);

var txturl=as[index].getAttribute('href');

var turl=txturl.split('#');

$("#"+this.page).parent().find('.go_btn').attr('href',turl[1]);

}});

tt.page = page;

tt.p = 0;

for(var i=0;ias.length;i++){

(function(){

var j=i;

as[j].tt = tt;

as[j].onclick=function(){

this.tt.slide(j);

return false;

}

})();

}

/script