jQuery+turn.js翻书、文档和杂志

turn.js是一个基于HTML5的翻书插件,会使你的内容看起来像一个真正的书或杂志。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线充值

分类：其它特效 > jQuery插件难易：中级

查看演示

加我微信，拉你进VIP群学习：

下载资源下载积分： 30 积分

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);	-

jQuery+turn.js翻书、文档和杂志 收藏

turn.js有以下优势：

HTML

jQuery

Options选项

属性Properties

jQuery+turn.js翻书、文档和杂志
收藏