不使用任何框架,教你制作网页滑动切换效果

 

  导读:原文来自DZone作者Terrence Ryan发表的一篇《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。

document.addEventListener('DOMContentLoaded', function() {  
    replaceLinks();  
  });  
  function replaceLinks(){  
     var links = document.querySelectorAll('a');  
     
     for (i=0; i<links.length; i++){  
        var link = links[i];  
        link.addEventListener("click",replacePage, false);  
     } 
  } 

下一步是使用AJAX获取到链接页面。

event.preventDefault();  
   var href= this.href;  
   var ajax = new XMLHttpRequest();  
   ajax.open("GET",href,true);  
   ajax.send(); 

现在来看看要达到切换需要哪些步骤:
1. 滑动当前页面到屏幕左侧;
2. 瞬间移动当前页面到屏幕右侧;
3. 替换body里面的内容;
4. 从屏幕右侧滑入当前页面对。
你必须要遵循上面的步骤,不然不能达到预期的效果;现在我来告诉我是怎么做的:
我移动body到屏幕的左侧

body.style.left = "-100%";

这里我写了个移动监听事件

body.addEventListener( 'webkitTransitionEnd', moveToRight, false);  
      
   function moveToRight(event){  
      var body = document.querySelector('body');  
      body.removeEventListener( 'webkitTransitionEnd', moveToRight, false);  
      body.addEventListener( 'webkitTransitionEnd', returnToCenter, false);  
      body.style.opacity = 0;  
      body.style.left = "100%" 
   } 

接下来,我替换body的内容,让它再次可见,调整浏览记录,并将它带回屏幕中心。

function returnToCenter(event){  
      var body = document.querySelector('body');  
      body.removeEventListener( 'webkitTransitionEnd', returnToCenter, false);  
      body.innerHTML = bodyContent;  
      history.pushState(null, null, href);  
      body.style.opacity = 1;  
      body.style.left = 0;  
      replaceLinks();  
   } 

切换过程中,用户可能会点击后退按钮,我们还需对此进行处理:

window.addEventListener("popstate", handleBackButton);  
    
  function handleBackButton(e) {  
     
     var ajaxBack = new XMLHttpRequest();  
     ajaxBack.open("GET",location.pathname,true);  
     ajaxBack.send();  
     
     ajaxBack.onreadystatechange=function(){  
        var bodyBack = document.querySelector('body');  
        var bodyBackContent = grabBody(ajaxBack.responseText, "body");  
        bodyBack.addEventListener( 'webkitTransitionEnd', moveToLeft, false);  
        bodyBack.style.left = "100%";  
     
        function backToCenter(event){  
           var body = document.querySelector('body');  
           body.removeEventListener( 'webkitTransitionEnd', backToCenter, false);  
           body.innerHTML = bodyBackContent;  
           body.style.opacity = 1;  
           body.style.left = 0;  
           replaceLinks();  
        }  
     
        function moveToLeft(event){  
           var body = document.querySelector('body');  
           body.removeEventListener( 'webkitTransitionEnd', moveToLeft, false);  
           body.addEventListener( 'webkitTransitionEnd', backToCenter, false);  
           body.style.opacity = 0;  
           body.style.left = "-100%" 
        }  
     }  
  } 

有人会问,这是一个最好的方法么?我也不知道,但是它确实管用,而且通过谷歌我没有找到更好的解决方案。
这里提供有一个演示地址。(只WebKit浏览器有效)
你也可以通过github获取完整的源代码。

posted @ 2012-04-19 10:32  脉凌网络  阅读(839)  评论(1编辑  收藏  举报