html5頁面滑動,javascript滑動頁面

求教.HTML5頁面滑動時(shí)，添加頁面元素動畫效果

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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國際域名空間、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、鏡湖網(wǎng)站維護(hù)、網(wǎng)站推廣。

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

手機(jī)HTML5頁面、滑動出現(xiàn)停頓-底部圖片出現(xiàn)抖動

你給的測試頁面，拋異常了，這可能是導(dǎo)致問題的原因，你用PC瀏覽器打開控制臺，就能看到了。錯(cuò)誤代碼如下

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

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

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

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

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

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

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

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

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

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

每個(gè)Touch對象包含的屬性如下。

clientX：觸摸目標(biāo)在視口中的x坐標(biāo)。

clientY：觸摸目標(biāo)在視口中的y坐標(biāo)。

identifier：標(biāo)識觸摸的唯一ID。

pageX：觸摸目標(biāo)在頁面中的x坐標(biāo)。

pageY：觸摸目標(biāo)在頁面中的y坐標(biāo)。

screenX：觸摸目標(biāo)在屏幕中的x坐標(biāo)。

screenY：觸摸目標(biāo)在屏幕中的y坐標(biāo)。

target：觸目的DOM節(jié)點(diǎn)目標(biāo)。

舉個(gè)例子-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

上面的小例子當(dāng)touchstart事件觸發(fā)的時(shí)候，會將觸摸的位置更新到div標(biāo)簽中。當(dāng)touchmove事件觸發(fā)的時(shí)候，會默認(rèn)行為的滾動

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

touchend事件觸發(fā)的時(shí)候，touches集合中就沒有任何Touch對象了，因?yàn)椴淮嬖诨顒拥挠|摸操作。

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

(1)touchstart

(2)mouseover

(3)mousemove(一次)

(4)mousedown

(5)mouseup

(6)click

(7)touchend

html5中的頁面交互元素有哪些

1、點(diǎn)擊屏幕交互

點(diǎn)擊是最常用的手勢，經(jīng)常用于頁面切換。點(diǎn)擊引導(dǎo)可以作為注釋，用戶可以理解H5內(nèi)容，使用戶能夠按照H5的節(jié)奏操作。例如，在《帶上希望的種子去北京》中，用戶可以點(diǎn)擊手勢“檢查”行李箱，詳細(xì)查看H5設(shè)計(jì)的內(nèi)容。

2、連續(xù)點(diǎn)擊交互

連擊交互在游戲類中的應(yīng)用比較多。在游戲類H5中，通常由連續(xù)點(diǎn)擊生成的數(shù)值關(guān)聯(lián)積分排名，具有競技性質(zhì)的H5可以進(jìn)一步吸引用戶參與。例如，《漫威電影十周年》的“揍”滅霸小游戲，用戶繼續(xù)點(diǎn)擊屏幕，10秒內(nèi)的點(diǎn)擊次數(shù)就會計(jì)算出整個(gè)網(wǎng)絡(luò)排名。

3、長按交互

長按是用戶根據(jù)H5引導(dǎo)長時(shí)間觸摸頁面。長按交互用戶需要保持手指靜止?fàn)顟B(tài)，并在設(shè)計(jì)時(shí)提示H5播放進(jìn)度參考，以避免乏味。例如，從騰訊公益的《敦煌未來博物館》設(shè)計(jì)的風(fēng)化過程來看，用戶點(diǎn)擊手機(jī)即可看到壁畫隨著年份推移逐漸風(fēng)化的場景，還可以喚醒用戶心中的文化保護(hù)意識。

4、滑動交互

拖拽交互必須在長按交互的基礎(chǔ)上滑動，從一個(gè)點(diǎn)拖動到另一個(gè)點(diǎn)可以讓用戶自行控制速度。適合圖片展示類的H5。例如，在《睡姿大比拼》中，用戶可以拖動角色肢體來創(chuàng)建各種有趣的睡眠姿勢。

5、重力交互

重力交互是一個(gè)非常直觀的表達(dá)形式，用戶可以輕松get到H5獲得樂趣，這意味著手機(jī)硬件能升級給H5設(shè)計(jì)帶來了更多的可能性。利用重力感應(yīng)、陀螺儀、速度加速器等硬件，對H5的玩法進(jìn)行創(chuàng)新，提高用戶的代入感。例如，安裝在《一“陸”狂飆，極速挑戰(zhàn)》上的賽車游戲是通過手機(jī)重力傳感來調(diào)整小車的方向。

6、全景交互

全景交互在屏幕中以360度展現(xiàn)所有場景，用戶可以通過滑動移動場景。這種H5格式(如VR)需要關(guān)注整個(gè)場景的設(shè)計(jì)，邊界連接要足夠順暢，全景加載內(nèi)容較大，一定要注意用戶等待和屏幕卡頓的問題。例如，華為出品的《我的榮耀5G世界》中全景互動展示了未來豐富多彩的5G世界。

以上幾種就是現(xiàn)目前比較常見的H5交互元素，如有幫助請采納~

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

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

1、html5頁面代碼

!DOCTYPE html

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

titleHTML5手機(jī)頁面觸屏滑動上下翻頁特效/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