使用css3中transition的页面切换(继续创新版)

上一篇文章，我从教程中学到了使用css3中transition的页面切换，而这次呢，我就稍微使用这个方法稍做一些少少改动，我的想法是将所有层都叠在一起，一个一个从下往上翻。然后接着这个思路我又想到如果翻完的话怎么办？我就弄多了一个可以重新来过的按钮。最后总觉得美中不足，只有向下一页的翻动，如果想返回上一页的话，还要重新来过，为此我又新增加多一个按钮，按钮的动画我还是选择了Javascript来控制。

      首先看看效果图

     demo地址：http://zhuyingyan.github.com/myfavourite/update.html

这里我还弄的比较简单，还没有加上内容。

首先是html，

?

< div  id = "mylife" >              < ul >                  <!-- page top -->                  < li  id = "pageFour"  class = "panel" >                      < div  class = "content" >                          < h2 >page Four</ h2 >                          < p >Some content  ssss</ p >                      </ div >                  </ li >                  < li  id = "pageThree"  class = "panel" >                      < div  class = "content" >                          < h2 >Page Three</ h2 >                          < p >Some content  ssss</ p >                      </ div >                  </ li >                  < li  id = "pageTwo"  class = "panel" >                      < div  class = "content" >                          < h2 >Page Two</ h2 >                          < p >Some content  ssss</ p >                      </ div >                  </ li >                                    < li  id = "pageOne"  class = "panel" >                      < div  class = "content" >                          < h2 >Page one</ h2 >                          < p >Some content  ssss</ p >                      </ div >                  </ li >                  < li  id = "pageTop"  class = "panel" >                      < div  class = "content" >                          < p  class = "c-special" >to my favourite person：</ p >                          < h2 >Roger Federer</ h2 >                          < p >Some content  ssss</ p >                      </ div >                  </ li >                          </ ul >          </ div >          < div  id = "header" >              < ul  id = "navigation" >                  < li >< a  id = "perviousPage"  href = "#" >pervious page</ a ></ li >                  < li >< a  id = "nextPage"  href = "#" >next page</ a ></ li >                  < li >< a  id = "again"  href = "#" >again</ a ></ li >                                </ ul >          </ div >

      我把原本的内容页的div结构，改成ul，li结构。不过这里有点不太合理的地方就是我把页数在html中反过来写了，就是说我最后一页的div层放在第一个li里面。这个往后再做修改，这也关联到javascript的修改。

      接着是css代码，跟之前的css并没有太大改动，主要是按钮的位置做了调整，还有使用javascript增加class的class定义。

.panelclick{
    margin-top:-150%;
    background:#fff;
    -webkit-transition:all 1.8s ease-in-out;
    -moz-transition:all 1.8s ease-in-out;
    -o-transition:all 1.8s ease-in-out;
    -ms-transition:all 1.8s ease-in-out;
    transition:all 1.8s ease-in-out;
}
#navigation .linkClick{
    background:#000;
    color:#fff;
}

　　最后是javascript代码：

var pageChange = (function(){
            /**
            * listClickID 取得放着全部页面的ID号
            * tagName     每个页面放于的标签
            * i           这个比较重要是当前第i个页面，从0开始到length-1
            * length      页面的个数
            * nextPageId  下一页按钮的ID号
            * again       重新来过按钮的ID号
            * perviousPage上一页按钮的ID号
            * 
            *  
            */
            var listClickID,tagName,nextPageId,againId,perviousPageId;   
            var listClick=document.getElementById(listClickID||"mylife").getElementsByTagName(tagName||"li");
            var i=0,length=listClick.length;
            var nextPage=document.getElementById(nextPageId||"nextPage");
            var again=document.getElementById(againId||"again");
            var perviousPage=document.getElementById(perviousPageId||"perviousPage");
            /**
            * init        获取下一页并加上className实现动画效果
            */
            var init=function(){                            
                            
                            var id=this.id;
                            if(i>=length){
                                return false;
                            }
                            var block=listClick[length-i-1];
                            i++;
                            
                            block.style.MozTransitionDelay="0s";
                            block.style.WebkitTransitionDelay="0s";
                            if(block.className.indexOf("panelclick")==-1)
                                block.className+=" panelclick";                    
            };
            /**
            * restart       页面都从上往下回来，而且是有层次的一个接着一个，这里我就用了延时
            */
            var restart=function(){
                    i=0;
                    var j=0;
                    for(;i < length;i++){
                        var block=listClick[i];
                        console.log(block);
                        if(block.className.indexOf("panelclick")!=-1)
                            {
                                block.className=block.className.replace(" panelclick","");
                                block.style.MozTransitionDelay=j+"s";
                                block.style.WebkitTransitionDelay=j+"s";
                                j++;
                            }
                    }
                    j=0;
                    i=0;
            };
            /**
            * previous        获取上一页并删去className实现动画效果
            */
            var previous=function(){                    
                        if((length-i)>length-1){
                            return false;
                        }
                        var block=listClick[length-i];
                        console.log(block);
                        if(block.className.indexOf("panelclick")!=-1)
                        {
                            block.className=block.className.replace(" panelclick","");
                            block.style.MozTransitionDelay="0s";
                            block.style.WebkitTransitionDelay="0s";
                        }
                        i=i-1;                    
            };
            return {
                setListClick:function(listID){
                    listClickID=listID;
                    return this;
                },
                setTagName:function(tagname){
                    tagName=tagname;
                    return this;
                },
                setNextPageId:function(nid){
                    nextPageId=nid;
                    return this;
                },
                setAgainId:function(aid){
                    againId=aid;
                    return this;
                },
                setPerviousPageId:function(pid){
                    perviousPageId=pid;
                    return this;
                },
                /**
                * 加入事件绑定，实现相关键盘，鼠标点击效果
                */
                mouseEvent:function(){
                    var body=document.getElementsByTagName("body")[0];
                    var that=this;
                    body.addEventListener("keydown",function(event){
                        console.log(event.keyCode);
                        if(event.keyCode==37){
                            previous();
                        }
                        else if(event.keyCode==39){
                            init();
                        }
                    });
                    perviousPage.addEventListener("click",function(event){
                        previous();
                    });
                    nextPage.addEventListener("click",function(event){
                        init();
                    });
                    again.addEventListener("click",function(event){
                        restart();
                    });
                    return this;
                }
            }
        }(pageChange || {}));
        pageChange.mouseEvent();

    最后，小小的总结，由于思路有限，先是写这么多，之后希望能够努力拓展拓展，完善其中的内容。