|
我做了一个关于网页滑动切换的小例子。这个确实很简单，只要你会使用jQuery、jQuery Mobile、zepto或者其他一些框架，然后他们会给你处理好这个。我不想这么做，我想挑战一下不使用任何框架就可以实现这个效果。HTML代码是越简单越好。
我谷歌搜索了下相关的资料，没有找到什么好的解决办法，所以我打算自己写。
我想出的解决办法其实很简单，采用AJAX刷新、CSS切换。这里还需要注意的是，只有在WebKit浏览器上能看到效果。(我个人用PhoneGap做了一个测试应用，可以在Android和IOS系统上运行，所以我只需要WebKit的兼容性。)
首先，我们来看看对body标签的css样式，我让它有动画效果：
3 |
-webkit-transition: left .2s ease; |
接下来，我做的是给超链接添加点击事件，让它产生切换效果。这我从一篇很棒的文章中学到的一些方法，来处理这些没有jQuery时的操作，那篇文章叫从jQuery到JavaScript。
01 |
document.addEventListener('DOMContentLoaded', function() { |
05 |
function replaceLinks(){ |
06 |
var links = document.querySelectorAll('a'); |
08 |
for (i=0; i<links.length; i++){ |
10 |
link.addEventListener("click",replacePage, false); |
下一步是使用AJAX获取到链接页面。
1 |
event.preventDefault(); |
4 |
var ajax = new XMLHttpRequest(); |
5 |
ajax.open("GET",href,true); |
现在来看看要达到切换效果，还需要哪些步骤:
1. 滑动当前页面到屏幕左侧；
2. 瞬间移动当前页面到屏幕右侧；
3. 替换body里面的内容；
4. 从屏幕右侧滑入当前页面对。
你必须要遵循上面的步骤，不然不能达到预期的效果；现在我来告诉我是怎么做的：
我移动body到屏幕的左侧
1 |
body.style.left = "-100%"; |
这里我写了个移动监听事件
1 |
body.addEventListener( 'webkitTransitionEnd', moveToRight, false); |
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%" |
接下来，我替换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; |
切换过程中，用户可能会点击后退按钮，我们还需对此进行处理：
01 |
window.addEventListener("popstate", handleBackButton); |
03 |
function handleBackButton(e) { |
05 |
var ajaxBack = new XMLHttpRequest(); |
06 |
ajaxBack.open("GET",location.pathname,true); |
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%"; |
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; |
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%" |
有人会问，这是一个最好的方法么？我也不知道，但是它确实管用，而且通过谷歌我没有找到更好的解决方案。
这里提供有一个演示地址。(只WebKit浏览器有效)
你也可以通过github获取完整的源代码。
(责任编辑：admin) |
