html5动画插件flipboard

By | 2014/05/01

今天介绍一个比较好的html5移动开发插件————flipboard;
这是一款开源免费的插件,感觉还是很好用的。
首先放一下效果图:
38A98162-B53D-4232-BA64-309CBF2760EA

887C131A-1BD7-412A-AA97-3AE265F92876

C149B314-03F8-48FB-B178-AED0F4FEDA56
这个就和ios上的iReading这个应用类似,手指轻轻滑动,就可实现翻页的效果,代码示例如下:

[code lang=”html”]
<div id="flip" class="container">

<div class="f-page f-cover">
<!– … –>
</div>

<div class="f-page">
<div class="f-title">
<!– … –>
</div>
<div class="box w-50 h-100">
<div class="img-cont img-1"></div>
<h3>Headline <span>Published May 7, 2012</span></h3>
<p>Some text</p>
</div>
<div class="box w-50 h-100">
<!– … –>
</div>
</div>

<div class="f-page">
<!– …每添加一个"f-page"就回增加一页 –>
</div>

<!– … –>

<div class="f-page f-cover-back">
<!– … –>
</div>

</div>
[/code]

所需js插件:TouchSwipe,History.js ,Modernizr
使用这个插件写好html网页之后,自用cordova for Android打包一下就可以了。
附上应用下载地址:点击此处
效果自己欣赏吧。

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据