turn.js是一个基于HTML5的翻书插件,会使你的内容看起来像一个真正的书或杂志。
turn.js有以下优势：
<ul class='ul_demo'> <li> 支持iPad和iPhone等移动设备。 </li> <li> 简单,美丽和强大的API。 </li> <li> 支持Ajax动态加载页面。 </li> <li> 纯HTML5和CSS3。 </li> <li> 有过渡效果。 </li> <li> 支持IE8等主流浏览器 </li> </ul>
HTML
<div class="flipbook">
<div style="background-image:url(pages/1.jpg)"></div>
<div style="background-image:url(pages/2.jpg)"></div>
<div style="background-image:url(pages/3.jpg)"></div>
</div>jQuery
默认翻书效果
$('.flipbook').turn({
width: 922,
height: 600,
elevation: 50,
gradients: true,
autoCenter: true
});turn.js中文API
| 参数 | 描述 | 默认值 |
Options选项 |
||
| acceleration | 加速模式ture or false。（必须在移动端） | true |
| autoCenter | 中心翻取决于有多少页面可见 true or false | false |
| direction | 翻页方向 $(&amp;quot;#flipbook&amp;quot;).turn({direction: &amp;quot;rtl&amp;quot;}); | ltr翻从左到右 |
| display | 显示模式(只显示一页single,两个页面double) | double |
| duration | 持续时间，单位毫秒。如果你设置为0,不会有过渡效果 | 600 |
| gradients | 显示渐变阴影 | true |
| height | 翻页的高度 | $(&amp;quot;flipbook&amp;quot;).height() |
| pages | 设置页面的数量 | $(&amp;quot;#flipbook&amp;quot;).children().length |
| turnCorners | 设置角落的值bl,br or tl,tr or bl,tr 例如:var way = 1; setInterval(function() { if (way==1) { $(&quot;#flipbook&quot;).turn(&quot;next&quot;); if ($(&quot;#flipbook&quot;).turn(&quot;page&quot;)== $(&quot;#flipbook&quot;).turn(&quot;pages&quot;)) { way = 2; $(&quot;#flipbook&quot;).turn(&quot;options&quot;, {turnCorners: &quot;tl,tr&quot;}); } } else { $(&quot;#flipbook&quot;).turn(&quot;previous&quot;); if ($(&quot;#flipbook&quot;).turn(&quot;page&quot;)==1) { way = 1; $(&quot;#flipbook&quot;).turn(&quot;options&quot;, {turnCorners: &quot;bl,br&quot;}); } } }, 1000); | bl,br |
| when | 监听事件 when 当，例如：$("#flipbook").turn({when: { turning: function(event, page, pageObject) { // Implementation } } }); | - |
属性Properties |
||
| animating | 若页面动画返回true时，例如：<pre>function isAnimating() { if ($("#flipbook").turn("animating")) { alert('Animating a page!'); } }</pre> | - |
| direction | 返回当前翻页的方向：$("#flipbook").turn("direction"); | - |
| disable | 启用或禁用翻页效果：$("#flipbook").turn("disable", true); | - |
系统已开启自动识别垃圾评论机制，识别到的自动封号，下载出错或者资源有问题请联系全栈客服QQ 1915635791