《
网页滑动切换特效 采用AJAX刷新和CSS切换》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234K32013.htm
你也能够通过github获取完全的源代码。
接下来，我替代body的内容，让它再次可见，调剂阅读记载，并将它带回屏幕核心。
下一步是应用AJAX获取到链接页面。
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 = ",
网页添加CSS样式表的四种方式;100%" 9 }
接下来，我做的是给超链接增加点击事件，让它发生切换效果。这我从一篇很棒的文章中学到的一些办法，来处理这些没有jQuery时的操作，那篇文章叫从jQuery到JavaScript。
--> [
网站建设之]网页滑动切换殊效:采取AJAX刷新跟CSS切换
我移动body到屏幕的左侧
首先，我们来看看对body标签的css款式，我让它有动画效果：
1 body{ 2 position: relative; 3 -webkit-transition: left .2s ease,
网页注册表单设计原则; 4 }
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,
网页文字阴影属性text-shadow, 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 }
1. 滑动当前页面到屏幕左侧；
4. 从屏幕右侧滑入当前页面对。
这里我写了个挪动监听事件
2. 霎时移动当前页面到屏幕右侧；
切换进程中，用户可能会点击撤退按钮，咱们还需对此进行处置：
Tag：切换 刷新 特效 网页 采用
有人会问，这是一个最好的方式么？我也不晓得，然而它确切管用，而且通过谷歌我不找到更好的解决计划。
你必需要遵守上面的步骤，不然不能到达预期的后果；当初我来告知我是怎么做的：
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刷新、CSS切换。这里还需要留神的是，只有在WebKit浏览器上能看到效果。(我个人用PhoneGap做了一个测试利用，可以在Android和IOS体系上运行，所以我只要要WebKit的兼容性。)
1 event.preventDefault(); 2 var href= this.href; 3 4 var ajax = new XMLHttpRequest(); 5 ajax.open("GET",href,true); 6 ajax.send();
1 body.style.left = "-100%";
现在来看看要达到切换效果，还须要哪些步骤:
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 }
3. 调换body里面的内容；
我做了一个对于网页滑动切换的小例子。这个确实很简略，只有你会使用jQuery、jQuery Mobile、zepto或者其余一些框架，而后他们会给你处理好这个。我不想这么做，我想挑衅一下不使用任何框架就可以实现这个效果。HTML代码是越简单越好。
这里供给有一个演示地址。(只WebKit浏览器有效)
我谷歌搜寻了下相干的材料，没有找到什么好的解决措施，所以我盘算本人写。
(责任编辑：网站建设)
网页滑动切换特效 采用AJAX刷新和CSS切换相关文章