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