13518219792
HTML5手機上下滑動翻頁特效是一款手機移動端觸屏滑動效果實現完整代碼如下：
從網站建設到定制行業(yè)解決方案，為提供網站建設、做網站服務體系，各種行業(yè)企業(yè)客戶提供網站建設解決方案，助力業(yè)務快速發(fā)展。創(chuàng)新互聯(lián)將不斷加快創(chuàng)新步伐，提供優(yōu)質的建站服務。
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
? ? ? 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、運行效果如下：
1、創(chuàng)建兩個html文件，一個test一個test2。
2、打開test頁面，在里面創(chuàng)建一個div，并給其添加onmousedown與move方法。
3、打開后我們發(fā)現是一個棕綠的頁面。
4、定義兩個變量，startx為鼠標按下的坐標，endx為鼠標移動的坐標。
5、實現鼠標點擊執(zhí)行的down方法，在里面通過clientX獲得鼠標按下坐標，并賦值給startx。
6、接著在實現鼠標移動的move方法，獲得鼠標移動的坐標，并通過startx與endx相減判斷是否向左邊滑動大于30的距離，是的話就切換到test2頁面。
7、現在我們打開test頁面，向左滑動會提示切換頁面（這個可以去除），確定后就切換到了test2頁面，向右滑動切換的方法同理。
左右滑動是由觸摸事件定義的，觸摸事件(touch)會在用戶手指放在屏幕上面的時候、在屏幕上滑動的時候或者是從屏幕上移開的時候觸發(fā)。下面具體說明：
touchstart事件：當手指觸摸屏幕時候觸發(fā)，即使已經有一個手指放在屏幕上也會觸發(fā)。
touchmove事件：當手指在屏幕上滑動的時候連續(xù)地觸發(fā)。在這個事件發(fā)生期間，調用preventDefault()事件可以阻止?jié)L動。
touchend事件：當手指從屏幕上離開的時候觸發(fā)。
touchcancel事件：當系統(tǒng)停止跟蹤觸摸的時候觸發(fā)。關于這個事件的確切出發(fā)時間，文檔中并沒有具體說明，咱們只能去猜測了。
上面的這些事件都會冒泡，也都可以取消。雖然這些觸摸事件沒有在DOM規(guī)范中定義，但是它們卻是以兼容DOM的方式實現的。所以，每個觸摸事件的event對象都提供了在鼠標實踐中常見的屬性：bubbles(起泡事件的類型)、cancelable(是否用 preventDefault() 方法可以取消與事件關聯(lián)的默認動作)、clientX(返回當事件被觸發(fā)時，鼠標指針的水平坐標)、clientY(返回當事件觸發(fā)時，鼠標指針的垂直坐標)、screenX(當某個事件被觸發(fā)時，鼠標指針的水平坐標)和screenY(返回當某個事件被觸發(fā)時，鼠標指針的垂直坐標)。除了常見的DOM屬性，觸摸事件還包含下面三個用于跟蹤觸摸的屬性。
touches：表示當前跟蹤的觸摸操作的touch對象的數組。
targetTouches：特定于事件目標的Touch對象的數組。
changeTouches：表示自上次觸摸以來發(fā)生了什么改變的Touch對象的數組。
每個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事件會輸出有關觸摸操作的最終信息。注意，在
touchend事件觸發(fā)的時候，touches集合中就沒有任何Touch對象了，因為不存在活動的觸摸操作。
這些事件會在文檔的所有元素上面觸發(fā)，因而可以分別操作頁面的不同部分。在觸摸屏幕上的元素，這些事件(包括鼠標事件)發(fā)生的順序如下：
(1)touchstart
(2)mouseover
(3)mousemove(一次)
(4)mousedown
(5)mouseup
(6)click
(7)touchend
用 wow.js 這是一個插件，為頁面添加滾動效果動畫的，手寫的話就監(jiān)聽鼠標滾動事件，利用JQUERY的ANIMATE去寫就好了，很簡單，
補充一句，wow只能執(zhí)行一次，如果要上下滑動都有效果的話用這個吧 RevealScroll；
用jQuery 的 animate方法，動態(tài)改變數據表格的高度，這樣應該可以實現
