現在越來越多的網站都需要支持手機端的訪問，而針對手機端的頁面設計就需要考慮更多的元素，其中一個就是頁面滑動的效果，而這里我們會介紹一種 html5 的手機端上下翻頁的效果。

<style>
html,body{
height:100%;
overflow:hidden;
}
section{
position:relative;
height:100%;
width:100%;
overflow:hidden;
transition:all 0.8s;
transform:translateY(0);
-webkit-transform:translateY(0);
-moz-transform:translateY(0);
-ms-transform:translateY(0);
-o-transform:translateY(0);
}
section:nth-child(2){
background-color:#2ecc71;
}
section:nth-child(3){
background-color:#3498db;
}
section:nth-child(4){
background-color:#9b59b6;
}
section:nth-child(5){
background-color:#f1c40f;
}
.up{
transform:translateY(-100%);
-webkit-transform:translateY(-100%);
-moz-transform:translateY(-100%);
-ms-transform:translateY(-100%);
-o-transform:translateY(-100%);
}
.down{
transform:translateY(100%);
-webkit-transform:translateY(100%);
-moz-transform:translateY(100%);
-ms-transform:translateY(100%);
-o-transform:translateY(100%);
}
</style>
<div id="wrap">
<section class="current">第一頁</section>
<section>第二頁</section>
<section>第三頁</section>
<section>第四頁</section>
<section>第五頁</section>
</div>
<script>
var sections = document.querySelectorAll("section");
var wrap = document.querySelector("#wrap");
var len = sections.length;
var current = 0;
var isMoving = false;
document.addEventListener("touchmove",function(event){
event.preventDefault();
},false);
wrap.addEventListener("touchstart",startTouch,false);
wrap.addEventListener("touchmove",moveTouch,false);
wrap.addEventListener("touchend",endTouch,false);
function startTouch(event){
startY = event.touches[0].pageY;
moveY = 0;
isMoving = true;
}
function moveTouch(event){
if(isMoving){
var touch = event.touches[0];
moveY = touch.pageY - startY;
if(Math.abs(moveY)< 20) moveY = 0;
event.preventDefault();
sections[current].style.transform = "translateY(" + moveY + "px)";
}
}
function endTouch(event){
if(isMoving){
if(moveY< -100){
sections[current].className += " up";
current++;
if(current >len - 1) current = len - 1;
sections[current].className = "current down";
}
else if(moveY >100){
sections[current].className += " down";
current--;
if(current< 0) current = 0;
sections[current].className = "current up";
}
else{
sections[current].className = "current";
}
sections[current].style.transform = "";
isMoving = false;
}
}
</script>

以上代碼中，html 部分包含了一個 id 為 wrap 的 div 容器，容器中包含了 5 個 section 標簽，每個 section 代表著每一頁的具體內容，其中“第一頁”、“第二頁”等文字都是可以更改的。

而 css 部分則定義了 wrap、section 的樣式，包括一些 transform 的動作；當然每一個 section 的樣式需要單獨設置，這里我們設置了五個不同顏色的背景用來區分每一頁。其中 current 類表示當前頁，up 類和 down 類分別表示頁面移動的方向。

javascript 部分則是處理用戶滑動的事件并判斷上下移動的距離，最終通過給相應的標簽增加類名進行頁面的切換。