我做了一個關於網頁滑動切換的小例子。這個確實很簡單，只要你會使用jQuery、jQuery Mobile、zepto或者其他一些框架，然後他們會給你處理好這個。我不想這麼做，我想挑戰一下不使用任何框架就可以實現這個效果。HTML代碼是越簡單越好。
我谷歌搜索了下相關的資料，沒有找到什麼好的解決辦法，所以我打算自己寫。
我想出的解決辦法其實很簡單，采用AJAX刷新、CSS切換。這裡還需要注意的是，只有在WebKit浏覽器上能看到效果。(我個人用PhoneGap做了一個測試應用，可以在Android和IOS系統上運行，所以我只需要WebKit的兼容性。)
首先，我們來看看對body標簽的css樣式，我讓它有動畫效果：
1
body{
2
position: relative;
3
-webkit-transition: left .2s ease;
4
}
接下來，我做的是給超鏈接添加點擊事件，讓它產生切換效果。這我從一篇很棒的文章中學到的一些方法，來處理這些沒有jQuery時的操作，那篇文章叫從jQuery到JavaScript。
01
document.addEventListener('DOMContentLoaded', function() {
02
replaceLinks();
03
});
04
05
function replaceLinks(){
06
var links = document.querySelectorAll('a');
07
08
for (i=0; i<links.length; i++){
09
var link = links[i];
10
link.addEventListener("click",replacePage, false);
11
}
12
13
}
下一步是使用AJAX獲取到鏈接頁面。
1
event.preventDefault();
2
var href= this.href;
3
4
var ajax = new XMLHttpRequest();
5
ajax.open("GET",href,true);
6
ajax.send();
現在來看看要達到切換效果，還需要哪些步驟:
1. 滑動當前頁面到屏幕左側；
2. 瞬間移動當前頁面到屏幕右側；
3. 替換body裡面的內容；
4. 從屏幕右側滑入當前頁面對。
你必須要遵循上面的步驟，不然不能達到預期的效果；現在我來告訴我是怎麼做的：
我移動body到屏幕的左側
1
body.style.left = "-100%";
這裡我寫了個移動監聽事件
1
body.addEventListener( 'webkitTransitionEnd', moveToRight, false);
2
3
function moveToRight(event){
4
var body = document.querySelector('body');
5
body.removeEventListener( 'webkitTransitionEnd', moveToRight, false);
6
body.addEventListener( 'webkitTransitionEnd', returnToCenter, false);
7
body.style.opacity = 0;
8
body.style.left = "100%"
9
}
接下來，我替換body的內容，讓它再次可見，調整浏覽記錄，並將它帶回屏幕中心。
1
function returnToCenter(event){
2
var body = document.querySelector('body');
3
body.removeEventListener( 'webkitTransitionEnd', returnToCenter, false);
4
body.innerHTML = bodyContent;
5
history.pushState(null, null, href);
6
body.style.opacity = 1;
7
body.style.left = 0;
8
replaceLinks();
9
}
切換過程中，用戶可能會點擊後退按鈕，我們還需對此進行處理：
01
window.addEventListener("popstate", handleBackButton);
02
03
function handleBackButton(e) {
04
05
var ajaxBack = new XMLHttpRequest();
06
ajaxBack.open("GET",location.pathname,true);
07
ajaxBack.send();
08
09
ajaxBack.onreadystatechange=function(){
10
var bodyBack = document.querySelector('body');
11
var bodyBackContent = grabBody(ajaxBack.responseText, "body");
12
bodyBack.addEventListener( 'webkitTransitionEnd', moveToLeft, false);
13
bodyBack.style.left = "100%";
14
15
function backToCenter(event){
16
var body = document.querySelector('body');
17
body.removeEventListener( 'webkitTransitionEnd', backToCenter, false);
18
body.innerHTML = bodyBackContent;
19
body.style.opacity = 1;
20
body.style.left = 0;
21
replaceLinks();
22
}
23
24
function moveToLeft(event){
25
var body = document.querySelector('body');
26
body.removeEventListener( 'webkitTransitionEnd', moveToLeft, false);
27
body.addEventListener( 'webkitTransitionEnd', backToCenter, false);
28
body.style.opacity = 0;
29
body.style.left = "-100%"
30
}
31
}
32
}
有人會問，這是一個最好的方法麼？我也不知道，但是它確實管用，而且通過谷歌我沒有找到更好的解決方案。
這裡提供有一個演示地址。(只WebKit浏覽器有效)
你也可以通過github獲取完整的源代碼。