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

zdsfg14

<div id="cnblogs_post_body">      上一篇文章，我从教程中学到了使用css3中transition的页面切换，而这次呢，我就稍微使用这个方法稍做一些少少改动，我的想法是将所有层都叠在一起，一个一个从下往上翻。然后接着这个思路我又想到如果翻完的话怎么办？我就弄多了一个可以重新来过的按钮。最后总觉得美中不足，只有向下一页的翻动，如果想返回上一页的话，还要重新来过，为此我又新增加多一个按钮，按钮的动画我还是选择了Javascript来控制。
      首先看看效果图
     demo地址：http://zhuyingyan.github.com/myfavourite/update.html

这里我还弄的比较简单，还没有加上内容。
首先是html，
<div class="cnblogs_Highlighter"><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>