HTML5手機(jī)上下滑動(dòng)翻頁(yè)特效是一款手機(jī)移動(dòng)端觸屏滑動(dòng)效果實(shí)現(xiàn)完整代碼如下：
從網(wǎng)站建設(shè)到定制行業(yè)解決方案，為提供網(wǎng)站建設(shè)、做網(wǎng)站服務(wù)體系，各種行業(yè)企業(yè)客戶(hù)提供網(wǎng)站建設(shè)解決方案，助力業(yè)務(wù)快速發(fā)展。創(chuàng)新互聯(lián)將不斷加快創(chuàng)新步伐，提供優(yōu)質(zhì)的建站服務(wù)。
1、html5頁(yè)面代碼
!DOCTYPE html
htmlheadmeta http-equiv="Content-Type" content="text/html; charset=UTF-8"
titleHTML5手機(jī)頁(yè)面觸屏滑動(dòng)上下翻頁(yè)特效/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
? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/2.jpg); background-size: cover; background-position: 50% 50%;"/div
? ? ? /div
? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/3.jpg); background-size: cover; background-position: 50% 50%;"/div
? ? ? /div
? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/4.jpg); background-size: cover; background-position: 50% 50%;"/div
? ? ? /div
? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/5.jpg); background-size: cover; background-position: 50% 50%;"/div
? ? ? /div
? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/6.jpg); background-size: cover; background-position: 50% 50%;"/div
? ? ? /div
? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/7.jpg); background-size: cover; background-position: 50% 50%;"/div
? ? ? /div
? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/8.jpg); background-size: cover; background-position: 50% 50%;"/div
? ? ? /div
? /div
/section
section class="u-pageLoading"
? img src="./hamer_files/load.gif" alt="loading"
/section
script src="./hamer_files/init.mix.js" type="text/javascript" charset="utf-8"/script
script src="./hamer_files/coffee.js" type="text/javascript" charset="utf-8"/script
script src="./hamer_files/99_main.js" type="text/javascript" charset="utf-8"/script
/body/html
2、css代碼：
@charset "utf-8";
.ad_foot li { margin:0 auto 1em; font-size:1.8em; padding:15px; background:#FFF;}
.ad_foot li a {display:block;}
.ad_foot li .l {width:75px; height:75px; float:left; overflow:hidden;}
.ad_foot li .l img {width:75px; width:75px;}
.ad_foot li .r {width:78%; float:left; margin-left:30px; color:#666; overflow:hidden;}
.ad_foot li .r p {color:#999; font-size:1.2em; }
.ad_foot li .r span {font-size:0.8em;}
.ad_foot li .r i {font-style:normal;}
.lazy-img, .lazy-finish{background-color:#f0eded;}
.page-list{font-size:20px;font-family: "Microsoft yahei";padding-left:17px;padding-top:30px;height:35px;border-bottom:1px solid #b5b5b5;display:none;}
.ad_foot{padding:15px 15px 0 15px;}
/*聲音播放按鈕*/
#song_img {width:293px; height:41px; display:block; position:absolute; right:4.1em; top:1.6em; font-size:1.7em; text-align:center; line-height:41px; color:#FFF; background:url(../img/music_c3.png) no-repeat 0 0;}
/*底部推薦*/
.ad_list{margin-top:2em;}.ad_list li {width:46%; background:none; padding:0; float:left;margin-bottom: 1em;}
.ad_list li.r {float:right;}.ad_list li a img {width:100%; height:auto;}
.ad_foot h3 {width:100%; height:48px; line-height:48px; background:#F9F5EC;}
.ad_foot h3 a {display:inline-block; color:#444; width:50%; text-align:center; font-size:1.5em; height:48px; border-bottom:2px solid #FF9240;}
.ad_foot h3 a.active {color:#FFF; background:#FF9240;}
.magazine_1 li {
width:100%;
margin-bottom: 1em;
font-size: 1.8em;
padding: 15px;
background: #FFF;}
.magazine_1 li a {display:block;}
.magazine_1 li .l {width: 75px;
height: 75px;
float: left;
overflow: hidden;}
.magazine_1 li .l img {width:75px; height:75px;}
.magazine_1 li .r {width: 78%;
float: left;
margin-left: 30px;
color: #666;
overflow: hidden;}
.magazine_1 li .r p {
color: #999;
font-size: 1.2em;
.magazine_1 li .r span {font-size:0.8em;}
.ad_foot li .r i {font-style:normal;}
3、運(yùn)行效果如下：
1、創(chuàng)建兩個(gè)html文件，一個(gè)test一個(gè)test2。
2、打開(kāi)test頁(yè)面，在里面創(chuàng)建一個(gè)div，并給其添加onmousedown與move方法。
3、打開(kāi)后我們發(fā)現(xiàn)是一個(gè)棕綠的頁(yè)面。
4、定義兩個(gè)變量，startx為鼠標(biāo)按下的坐標(biāo)，endx為鼠標(biāo)移動(dòng)的坐標(biāo)。
5、實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊執(zhí)行的down方法，在里面通過(guò)clientX獲得鼠標(biāo)按下坐標(biāo)，并賦值給startx。
6、接著在實(shí)現(xiàn)鼠標(biāo)移動(dòng)的move方法，獲得鼠標(biāo)移動(dòng)的坐標(biāo)，并通過(guò)startx與endx相減判斷是否向左邊滑動(dòng)大于30的距離，是的話(huà)就切換到test2頁(yè)面。
7、現(xiàn)在我們打開(kāi)test頁(yè)面，向左滑動(dòng)會(huì)提示切換頁(yè)面（這個(gè)可以去除），確定后就切換到了test2頁(yè)面，向右滑動(dòng)切換的方法同理。
左右滑動(dòng)是由觸摸事件定義的，觸摸事件(touch)會(huì)在用戶(hù)手指放在屏幕上面的時(shí)候、在屏幕上滑動(dòng)的時(shí)候或者是從屏幕上移開(kāi)的時(shí)候觸發(fā)。下面具體說(shuō)明：
touchstart事件：當(dāng)手指觸摸屏幕時(shí)候觸發(fā)，即使已經(jīng)有一個(gè)手指放在屏幕上也會(huì)觸發(fā)。
touchmove事件：當(dāng)手指在屏幕上滑動(dòng)的時(shí)候連續(xù)地觸發(fā)。在這個(gè)事件發(fā)生期間，調(diào)用preventDefault()事件可以阻止?jié)L動(dòng)。
touchend事件：當(dāng)手指從屏幕上離開(kāi)的時(shí)候觸發(fā)。
touchcancel事件：當(dāng)系統(tǒng)停止跟蹤觸摸的時(shí)候觸發(fā)。關(guān)于這個(gè)事件的確切出發(fā)時(shí)間，文檔中并沒(méi)有具體說(shuō)明，咱們只能去猜測(cè)了。
上面的這些事件都會(huì)冒泡，也都可以取消。雖然這些觸摸事件沒(méi)有在DOM規(guī)范中定義，但是它們卻是以兼容DOM的方式實(shí)現(xiàn)的。所以，每個(gè)觸摸事件的event對(duì)象都提供了在鼠標(biāo)實(shí)踐中常見(jiàn)的屬性：bubbles(起泡事件的類(lèi)型)、cancelable(是否用 preventDefault() 方法可以取消與事件關(guān)聯(lián)的默認(rèn)動(dòng)作)、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))。除了常見(jiàn)的DOM屬性，觸摸事件還包含下面三個(gè)用于跟蹤觸摸的屬性。
touches：表示當(dāng)前跟蹤的觸摸操作的touch對(duì)象的數(shù)組。
targetTouches：特定于事件目標(biāo)的Touch對(duì)象的數(shù)組。
changeTouches：表示自上次觸摸以來(lái)發(fā)生了什么改變的Touch對(duì)象的數(shù)組。
每個(gè)Touch對(duì)象包含的屬性如下。
clientX：觸摸目標(biāo)在視口中的x坐標(biāo)。
clientY：觸摸目標(biāo)在視口中的y坐標(biāo)。
identifier：標(biāo)識(shí)觸摸的唯一ID。
pageX：觸摸目標(biāo)在頁(yè)面中的x坐標(biāo)。
pageY：觸摸目標(biāo)在頁(yè)面中的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í)候，會(huì)將觸摸的位置更新到div標(biāo)簽中。當(dāng)touchmove事件觸發(fā)的時(shí)候，會(huì)默認(rèn)行為的滾動(dòng)
(觸摸移動(dòng)的默認(rèn)行為是滾動(dòng)頁(yè)面)，然后觸摸操作的變化信息更新到div標(biāo)簽中。而touchend事件會(huì)輸出有關(guān)觸摸操作的最終信息。注意，在
touchend事件觸發(fā)的時(shí)候，touches集合中就沒(méi)有任何Touch對(duì)象了，因?yàn)椴淮嬖诨顒?dòng)的觸摸操作。
這些事件會(huì)在文檔的所有元素上面觸發(fā)，因而可以分別操作頁(yè)面的不同部分。在觸摸屏幕上的元素，這些事件(包括鼠標(biāo)事件)發(fā)生的順序如下：
(1)touchstart
(2)mouseover
(3)mousemove(一次)
(4)mousedown
(5)mouseup
(6)click
(7)touchend
用 wow.js 這是一個(gè)插件，為頁(yè)面添加滾動(dòng)效果動(dòng)畫(huà)的，手寫(xiě)的話(huà)就監(jiān)聽(tīng)鼠標(biāo)滾動(dòng)事件，利用JQUERY的ANIMATE去寫(xiě)就好了，很簡(jiǎn)單，
補(bǔ)充一句，wow只能執(zhí)行一次，如果要上下滑動(dòng)都有效果的話(huà)用這個(gè)吧 RevealScroll；
用jQuery 的 animate方法，動(dòng)態(tài)改變數(shù)據(jù)表格的高度，這樣應(yīng)該可以實(shí)現(xiàn)
重慶分公司
重慶分公司
