武林網(www.49028c.com)文章簡介：我想出的解決辦法其實很簡單，采用AJAX刷新、CSS切換。這里還需要注意的是，只有在WebKit瀏覽器上能看到效果。(我個人用PhoneGap做了一個測試應用，可以在Android和IOS系統上運行，所以我只需要WebKit的兼容性。)

我做了一個關于網頁滑動切換的小例子。這個確實很簡單，只要你會使用jQuery、jQuery Mobile、zepto或者其他一些框架，然后他們會給你處理好這個。我不想這么做，我想挑戰一下不使用任何框架就可以實現這個效果。HTML代碼是越簡單越好。

我谷歌搜索了下相關的資料，沒有找到什么好的解決辦法，所以我打算自己寫。

我想出的解決辦法其實很簡單，采用AJAX刷新、CSS切換。這里還需要注意的是，只有在WebKit瀏覽器上能看到效果。(我個人用PhoneGap做了一個測試應用，可以在Android和IOS系統上運行，所以我只需要WebKit的兼容性。)

首先，我們來看看對body標簽的css樣式，我讓它有動畫效果：

1body{

2position: relative;

3-webkit-transition: left .2s ease;

4}

接下來，我做的是給超鏈接添加點擊事件，讓它產生切換效果。這我從一篇很棒的文章中學到的一些方法，來處理這些沒有jQuery時的操作，那篇文章叫。

01document.addEventListener('DOMContentLoaded', function() {

02replaceLinks();

03});

04

05function replaceLinks(){

06var links = document.querySelectorAll('a');

07

08for (i=0; i<links.length; i++){

09var link = links[i];

10link.addEventListener("click",replacePage, false);

11}

12

13}

下一步是使用AJAX獲取到鏈接頁面。

1event.preventDefault();

2var href= this.href;

3

4var ajax = new XMLHttpRequest();

5ajax.open("GET",href,true);

6ajax.send();

現在來看看要達到切換效果，還需要哪些步驟:

1. 滑動當前頁面到屏幕左側；

2. 瞬間移動當前頁面到屏幕右側；

3. 替換body里面的內容；

4. 從屏幕右側滑入當前頁面對。

你必須要遵循上面的步驟，不然不能達到預期的效果；現在我來告訴我是怎么做的：

我移動body到屏幕的左側

1body.style.left = "-100%";

這里我寫了個移動監聽事件

1body.addEventListener( 'webkitTransitionEnd', moveToRight, false);

2

3function moveToRight(event){

4var body = document.querySelector('body');

5body.removeEventListener( 'webkitTransitionEnd', moveToRight, false);

6body.addEventListener( 'webkitTransitionEnd', returnToCenter, false);

7body.style.opacity = 0;

8body.style.left = "100%"

9}

接下來，我替換body的內容，讓它再次可見，調整瀏覽記錄，并將它帶回屏幕中心。

1function returnToCenter(event){

2var body = document.querySelector('body');

3body.removeEventListener( 'webkitTransitionEnd', returnToCenter, false);

4body.innerHTML = bodyContent;

5history.pushState(null, null, href);

6body.style.opacity = 1;

7body.style.left = 0;

8replaceLinks();

9}

切換過程中，用戶可能會點擊后退按鈕，我們還需對此進行處理：

01window.addEventListener("popstate", handleBackButton);

02

03function handleBackButton(e) {

04

05var ajaxBack = new XMLHttpRequest();

06ajaxBack.open("GET",location.pathname,true);

07ajaxBack.send();

08

09ajaxBack.onreadystatechange=function(){

10var bodyBack = document.querySelector('body');

11var bodyBackContent = grabBody(ajaxBack.responseText, "body");

12bodyBack.addEventListener( 'webkitTransitionEnd', moveToLeft, false);

13bodyBack.style.left = "100%";

14

15function backToCenter(event){

16var body = document.querySelector('body');

17body.removeEventListener( 'webkitTransitionEnd', backToCenter, false);

18body.innerHTML = bodyBackContent;

19body.style.opacity = 1;

20body.style.left = 0;

21replaceLinks();

22}

23

24function moveToLeft(event){

25var body = document.querySelector('body');

26body.removeEventListener( 'webkitTransitionEnd', moveToLeft, false);

27body.addEventListener( 'webkitTransitionEnd', backToCenter, false);

28body.style.opacity = 0;

29body.style.left = "-100%"

30}

31}

32}

有人會問，這是一個最好的方法么？我也不知道，但是它確實管用，而且通過谷歌我沒有找到更好的解決方案。

這里提供有一個演示地址。(只WebKit瀏覽器有效)

你也可以通過github獲取完整的源代碼。