当前位置: 网站建设 > 网页设计 > 建站经验 >

网页滑动切换特效 采用AJAX刷新和CSS切换

时间:2013-03-02 04:13来源:未知 作者:admin 点击:

标签:网页滑动切换特效 采用AJAX刷新和CSS切换 网页(168)新和(1)CSS(823)切换(4)你也(1)特效(2)采用(3)滑动(3)Ajax(4)
你也能够通过github获取完全的源代码。 接下来,我替代body的内容,让它再次可见,调剂阅读记载,并将它带回屏幕核心。 下一步是应用AJAX获取到链接页面。 1 body.addEventListener( 'webkitTransitionEnd', moveToRight, false); 2 3 function moveToRight(event){ 4 var body = document.querySelector('body'); 5 body.removeEventListener(
网页滑动切换特效 采用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切换相关文章
上一篇:网页添加CSS样式表的四种方式 下一篇:网页滚动条代码
回到顶部