turn.js是一个基于HTML5的翻书插件,会使你的内容看起来像一个真正的书或杂志。
淘建站为您提供更多_其它特效_jQuery插件_文档_翻书，在此特别感谢您对我们的支持与厚爱！
查看演示
演示不了，点击反馈
加入收藏
下载 195 次
打赏作者
觉得不错，可打赏下作者
下载资源
免费共享
特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。
turn.js有以下优势：
- 支持iPad和iPhone等移动设备。
- 简单,美丽和强大的API。
- 支持Ajax动态加载页面。
- 纯HTML5和CSS3。
- 有过渡效果。
- 支持IE8等主流浏览器
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); | - |
