zdsfg14 发表于 2013-1-4 03:04:19

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

<div id="cnblogs_post_body">      上一篇文章,我从教程中学到了使用css3中transition的页面切换,而这次呢,我就稍微使用这个方法稍做一些少少改动,我的想法是将所有层都叠在一起,一个一个从下往上翻。然后接着这个思路我又想到如果翻完的话怎么办?我就弄多了一个可以重新来过的按钮。最后总觉得美中不足,只有向下一页的翻动,如果想返回上一页的话,还要重新来过,为此我又新增加多一个按钮,按钮的动画我还是选择了Javascript来控制。
      首先看看效果图
   demo地址:http://zhuyingyan.github.com/myfavourite/update.html
http://pic002.cnblogs.com/images/2012/307484/2012072821482780.jpg
这里我还弄的比较简单,还没有加上内容。
首先是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 contentssss</p></div></li><li id="pageThree" class="panel"><div class="content"><h2>Page Three</h2><p>Some contentssss</p></div></li><li id="pageTwo" class="panel"><div class="content"><h2>Page Two</h2><p>Some contentssss</p></div></li><li id="pageOne" class="panel"><div class="content"><h2>Page one</h2><p>Some contentssss</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 contentssss</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>
页: [1]
查看完整版本: 使用css3中transition的页面切换(继续创新版)