由于自己的工作主要是做移动终端的产品(某阅读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>
相关文章:CSS3 3D图书展示 (3D Book Showcase)
感谢您的阅读,本文由 蓝色梦想 版权所有。如若转载,请注明出处:蓝色梦想 - 杂志翻页效果(基于jQuery CSS3)