使用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();
最后，小小的总结，由于思路有限，先是写这么多，之后希望能够努力拓展拓展，完善其中的内容。
