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

《教你制作网页滑动切换效果》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、我做了一个关于网页滑动切换的小例子。这个确实很简单，只要你会使用jQuery、jQueryMobile、zepto或者其他一些框架，然后他们会给你处理好这个。我不想这么做，我想挑战一下不使用任何框架就可以实现这个效果。HTML代码是越简单越好。我谷歌搜索了下相关的资料，没有找到什么好的解决办法，所以我打算自己写。我想出的解决办法其实很简单，采用AJAX刷新、CSS切换。这里还需要注意的是，只有在WebKit浏览器上能看到效果。(我个人用PhoneGap做了一个测试应用，可以在Android和IOS系统上运行，

2、所以我只需要WebKit的兼容性。)首先，我们来看看对body标签的css样式，我让它有动画效果：1.body{ 2. position: relative; 3.-webkit-transition: left .2s ease; 4.} 接下来，我做的是给超链接添加点击事件，让它产生切换效果。这我从一篇很棒的文章中学到的一些方法，来处理这些没有jQuery时的操作，那篇文章叫从jQuery到JavaScript。1.01 document.addEventListener('DOMContentLoade

3、d', function() { 2.02    replaceLinks(); 3.03  }); 4.04    5.05  function replaceLinks(){ 6.06     var links = document.querySelectorAll('a'); 7.07    8.08     for (i=0; i

4、er("click",replacePage, false); 11.11     } 12.12    13.13  } 下一步是使用AJAX获取到链接页面。1.1   event.preventDefault(); 2.2   var href= this.href; 3.3     4.4   var ajax = new XMLHttpRequest(); 5.5   ajax.open("GET",href,true); 6.6   ajax.send(); 现在来看看要达到切换效果，还需要哪些步骤

5、:1.滑动当前页面到屏幕左侧；2.瞬间移动当前页面到屏幕右侧；3.替换body里面的内容；4.从屏幕右侧滑入当前页面对。你必须要遵循上面的步骤，不然不能达到预期的效果；现在我来告诉我是怎么做的：我移动body到屏幕的左侧1.1 body.style.left = "-100%";  这里我写了个移动监听事件1.1   body.addEventListener( 'webkitTransitionEnd', moveToRight, false); 2.2     3.3   function moveToR

6、ight(event){ 4.4      var body = document.querySelector('body'); 5.5      body.removeEventListener( 'webkitTransitionEnd', moveToRight, false); 6.6      body.addEventListener( 'webkitTransitionEnd', returnToCenter, false); 7.7      body.style.opacity = 0; 8

7、.8      body.style.left = "100%" 9.9   } 接下来，我替换body的内容，让它再次可见，调整浏览记录，并将它带回屏幕中心。1.1   function returnToCenter(event){ 2.2      var body = document.querySelector('body'); 3.3      body.removeEventListener( 'webkitTransitionEnd', returnToCenter, false); 4.4  

8、    body.innerHTML = bodyContent; 5.5      history.pushState(null, null, href); 6.6      body.style.opacity = 1; 7.7      body.style.left = 0; 8.8      replaceLinks(); 9.9   } 切换过程中，用户可能会点击后退按钮，我们还需对此进