不使用任何框架.docVIP

不使用任何框架，教你制作网页滑动切换效果 导读：原文来自 HYPERLINK /articles/htmlslide-without \t _blank DZone，作者Terrence Ryan发表的一篇《 HYPERLINK /articles/htmlslide-without \t _blank HTML Page Slide Without a Framework》，只要你会使用jQuery、jQuery Mobile、zepto等，无须使用任何框架就可以实现网页滑动切换效果。 我做了一个关于网页滑动切换的小例子。这个确实很简单，只要你会使用jQuery、jQuery Mobile、zepto或者其他一些框架，然后他们会给你处理好这个。我不想这么做，我想挑战一下不使用任何框架就可以实现这个效果。HTML代码是越简单越好。 我谷歌搜索了下相关的资料，没有找到什么好的解决办法，所以我打算自己写。 我想出的解决办法其实很简单，采用AJAX刷新、CSS切换。这里还需要注意的是，只有在WebKit浏览器上能看到效果。(我个人用PhoneGap做了一个测试应用，可以在Android和IOS系统上运行，所以我只需要WebKit的兼容性。) 首先，我们来看看对body标签的css样式，我让它有动画效果： body{ position: relative; -webkit-transition: left .2s ease; } 接下来，我做的是给超链接添加点击事件，让它产生切换效果。这我从一篇很棒的文章中学到的一些方法，来处理这些没有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; ilinks.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( webkitTransitio