教你制作网页滑动切换效果.doc

我做了一个关于网页滑动切换的小例子。这个确实很简单，只要你会使用jQuery、jQuery Mobile、zepto或者其他一些框架，然后他们会给你处理好这个。我不想这么做，我想挑战一下不使用任何框架就可以实现这个效果。HTML代码是越简单越好。我谷歌搜索了下相关的资料，没有找到什么好的解决办法，所以我打算自己写。我想出的解决办法其实很简单，采用AJAX刷新、CSS切换。这里还需要注意的是，只有在WebKit浏览器上能看到效果。(我个人用PhoneGap做了一个测试应用，可以在Android和IOS系统上运行，所以我只需要WebKit的兼容性。)首先，我们来看看对body标签的css样式，我让它有动画效果：1. body 2. position:relative; 3. -webkit-transition:left.2sease; 4. 接下来，我做的是给超链接添加点击事件，让它产生切换效果。这我从一篇很棒的文章中学到的一些方法，来处理这些没有jQuery时的操作，那篇文章叫从jQuery到JavaScript。1. 01document.addEventListener(DOMContentLoaded,function() 2. 02replaceLinks(); 3. 03); 4. 04 5. 05functionreplaceLinks() 6. 06varlinks=document.querySelectorAll(a); 7. 07 8. 08for(i=0;ilinks.length;i+) 9. 09varlink=linksi; 10. 10link.addEventListener(click,replacePage,false); 11. 11 12. 12 13. 13下一步是使用AJAX获取到链接页面。1. 1event.preventDefault(); 2. 2varhref=this.href; 3. 3 4. 4varajax=newXMLHttpRequest(); 5. 5ajax.open(GET,href,true); 6. 6ajax.send();现在来看看要达到切换效果，还需要哪些步骤:1. 滑动当前页面到屏幕左侧；2. 瞬间移动当前页面到屏幕右侧；3. 替换body里面的内容；4. 从屏幕右侧滑入当前页面对。你必须要遵循上面的步骤，不然不能达到预期的效果；现在我来告诉我是怎么做的：我移动body到屏幕的左侧1. 1body.style.left=-100%;这里我写了个移动监听事件1. 1body.addEventListener(webkitTransitionEnd,moveToRight,false); 2. 2 3. 3functionmoveToRight(event) 4. 4varbody=document.querySelector(body); 5. 5body.removeEventListener(webkitTransitionEnd,moveToRight,false); 6. 6body.addEventListener(webkitTransitionEnd,returnToCenter,false); 7. 7body.style.opacity=0; 8. 8body.style.left=100%9. 9接下来，我替换body的内容，让它再次可见，调整浏览记录，并将它带回屏幕中心。1. 1functionreturnToCenter(event) 2. 2varbody=document.querySelector(body); 3. 3body.removeEventListener(webkitTransitionEnd,returnToCenter,false); 4. 4body.innerHTML=bodyContent; 5. 5history.pushState(null,null,href); 6. 6body.style.opacity=1; 7. 7body.style.left=0; 8. 8replaceLinks(); 9. 9切换过程中，用户可能会点击后退按钮，我们还需对此进行处理：1. 01window.addEventListener(popstate,handleBackButton); 2. 02 3. 03functionhandleBackButton(e) 4. 04 5. 05varajaxBack=newXMLHttpRequest(); 6. 06ajaxBack.open(GET,location.pathname,true); 7. 07ajaxBack.send(); 8. 08 9. 09ajaxBack.onreadystatechange=function() 10. 10varbodyBack=document.querySelector(body); 11. 11varbodyBackContent=grabBody(ajaxBack.responseText,body); 12. 12bodyBack.addEventListener(webkitTransitionEnd,moveToLeft,false); 13. 13bodyBack.style.left=100%; 14. 14 15. 15functionbackToCenter(event) 16. 16varbody=document.querySelector(body); 17. 17body.removeEventListener(webkitTransitionEnd,backToCenter,false); 18. 18body.innerHTML=bodyBackContent; 19. 19body.style.opacity=1; 20. 20body.style.left=0; 21. 21replaceLinks(); 22. 22 23. 23 24. 24functionmoveToLeft(event) 25. 25varbody=document.querySelector(body); 26. 26body.removeEventListener(webkitTransitionEnd,moveToLeft,false); 27. 27body.addEventListener(webkitTransitionEnd,b