由于自己的工作主要是做移动终端的产品(某阅读App),所以翻页啊什么更是一直接触。本人属于看到新鲜的、好玩的东西就手痒,所以诱使我写了今天的这个例子。

操作:键盘中“←左”“右→”方向键来实现翻页。

为了能带给您最佳的呈现效果,请使用基于webkit内核的浏览器:Chrome、Safari;不支持IE!

HTML结构其实很简单,类似“焦点图”的布局就行,剩下的就交给CSS和JS去处理吧:

<div id="magazine">
  <div class="page">
    <div class="content">内容...</div>
  </div>
  <div class="page" style="display: none;">
    <div class="content">内容...</div>
  </div>
  <div class="page">
    <div class="content">
      <div class="column columnLeft">两栏布局...</div>
      <div class="column columnRight">两栏布局...</div>
   </div>
  </div>
</div>

DemoDownload

相关文章:CSS3 3D图书展示 (3D Book Showcase)

感谢您的阅读,本文由 蓝色梦想 版权所有。如若转载,请注明出处:蓝色梦想 - 杂志翻页效果(基于jQuery CSS3)