html5滑動頁面,css3實現(xiàn)頁面滑動

h5頁面上下左右滑動

var startX = 0,

成都創(chuàng)新互聯(lián)成都企業(yè)網(wǎng)站建設(shè)服務(wù)，提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計網(wǎng)站開發(fā),網(wǎng)站定制,建網(wǎng)站,網(wǎng)站搭建,網(wǎng)站設(shè)計,響應(yīng)式網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計師打造企業(yè)風格網(wǎng)站,提供周到的售前咨詢和貼心的售后服務(wù)。歡迎咨詢做網(wǎng)站需要多少錢:13518219792

startY = 0,

operate = 0;

backDom.addEventListener('touchstart', function(evt) {

evt.preventDefault();

var touch = evt.touches[0], //獲取第一個觸點

? ? ? ? x = Number(touch.pageX), //頁面觸點X坐標

? ? ? ? y = Number(touch.pageY); //頁面觸點Y坐標

//記錄觸點初始位置

startX = x;

startY = y;

});

backDom.addEventListener('touchmove', function(evt) {

var touch = evt.touches[0], //獲取第一個觸點

? ? ? ? x = Number(touch.pageX), //頁面觸點X坐標

? ? ? ? y = Number(touch.pageY); //頁面觸點Y坐標

//判斷滑動方向

? ? ? ? if (y - startY0) {

? ? ? ? ? ? //console.log('下滑了！');

? ? ? ? ? ? operate = 1;

? ? ? ? }

});

backDom.addEventListener('touchend', function() {

if(operate == 1){

inviteDom.style.top = "100%"

inviteLetterBackwardDom.style.bottom = "-100%"

? inviteLetterForwardDom.style.bottom = "-100%"

}

});

html5 手機端怎么優(yōu)化頁面滑動

1、如果是div設(shè)置了滾動條導(dǎo)致滑動不順暢，可以在css中加入-webkit-overflow-scrolling : touch;

2、如果是幻燈片，可以用swiper插件一類的。

3、盡量用css3開啟GPU加速（css隨便哪里加個{transform:transition3d(0,0,0);}），用transform:translate(x,y)代替mairgin或者top。

4、減少滑動過程中的運動DOM。

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

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

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頁面滑動時，添加頁面元素動畫效果

用 wow.js 這是一個插件，為頁面添加滾動效果動畫的，手寫的話就監(jiān)聽鼠標滾動事件，利用JQUERY的ANIMATE去寫就好了，很簡單，

補充一句，wow只能執(zhí)行一次，如果要上下滑動都有效果的話用這個吧 RevealScroll；

html5怎么實現(xiàn)頁面左右滑動（下圖區(qū)域），可以左右滑動但不需要換頁

1、創(chuàng)建兩個html文件，一個test一個test2。

2、打開test頁面，在里面創(chuàng)建一個div，并給其添加onmousedown與move方法。

3、打開后我們發(fā)現(xiàn)是一個棕綠的頁面。

4、定義兩個變量，startx為鼠標按下的坐標，endx為鼠標移動的坐標。

5、實現(xiàn)鼠標點擊執(zhí)行的down方法，在里面通過clientX獲得鼠標按下坐標，并賦值給startx。

6、接著在實現(xiàn)鼠標移動的move方法，獲得鼠標移動的坐標，并通過startx與endx相減判斷是否向左邊滑動大于30的距離，是的話就切換到test2頁面。

7、現(xiàn)在我們打開test頁面，向左滑動會提示切換頁面（這個可以去除），確定后就切換到了test2頁面，向右滑動切換的方法同理。

html5上下滑動“翻頁”實現(xiàn)，是真正的翻頁

HTML5手機上下滑動翻頁特效是一款手機移動端觸屏滑動效果實現(xiàn)完整代碼如下：

1、html5頁面代碼

!DOCTYPE html

htmlheadmeta http-equiv="Content-Type" content="text/html; charset=UTF-8"

titleHTML5手機頁面觸屏滑動上下翻頁特效/title

meta charset="utf-8"

meta name="apple-touch-fullscreen" content="YES"

meta name="format-detection" content="telephone=no"

meta name="apple-mobile-web-app-capable" content="yes"

meta name="apple-mobile-web-app-status-bar-style" content="black"

meta http-equiv="Expires" content="-1"

meta http-equiv="pragram" content="no-cache"

link rel="stylesheet" type="text/css" href="./hamer_files/main.css"

link rel="stylesheet" type="text/css" href="./hamer_files/endpic.css"

script type="text/javascript" src="./hamer_files/offline.js"/script

meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi"

/head

body class="s-bg-ddd pc no-3d perspective yes-3d" style="-webkit-user-select: none;"

section class="u-alert"

? img style="display:none;" src="./hamer_files/loading_large.gif"

? div class="alert-loading z-move"

? ? ? div class="cycleWrap" span class="cycle cycle-1"/span

? ? ? ? ? span class="cycle cycle-2"/spanspan class="cycle cycle-3"/spanspan class="cycle cycle-4"/span

? ? ? /div

? ? ? div class="lineWrap" span class="line line-1"/spanspan class="line line-2"/spanspan class="line line-3"/span

? ? ? /div

? /div

/section

section class="u-arrow"

? p class="css_sprite01"/p

/section

section class="p-ct transformNode-2d transformNode-3d" style="height: 918px;"

? div class="translate-back" style="height: 918px;"

? ? ? div class="m-page m-fengye" data-page-type="info_pic3" data-statics="info_pic3" style="height: 918px;"

? ? ? ? ? div class="page-con lazy-finish" data-position="50% 50%" data-size="cover" style="height: 920px; background-image: url(hamer_files/1.jpg); background-size: cover; background-position: 50% 50%;"/div

? ? ? /div