今天介绍一个比较好的html5移动开发插件————flipboard;
这是一款开源免费的插件,感觉还是很好用的。
首先放一下效果图:
这个就和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打包一下就可以了。
附上应用下载地址:点击此处
效果自己欣赏吧。