码迷,mamicode.com
首页 > Web开发 > 详细

turn.js实现翻书效果

时间:2014-12-11 11:49:55      阅读:296      评论:0      收藏:0      [点我收藏+]

标签:style   http   io   ar   sp   java   strong   on   div   

JS插件网 http://www.ijquery.cn/?p=173

 

描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备。
Turn.js 支持硬件加速来让翻页效果更加平滑。
可通过 API 来获取当前显示的页号,并提供选项来定制默认页号、加速器、阴影和延时。

图片展示:

bubuko.com,布布扣

兼容浏览器:IE6+/Firefox/Google Chrome
官方链接:http://www.turnjs.com/
JS下载:http://www.ijquery.cn/js/turn.js
预览: http://www.ijquery.cn/demo/turn
打包下载:http://www.ijquery.cn/js/turn/turn.zip

HTML代码:注意这个脚本不能写在head前,只能放在magazine之后!

[html]

<div id="magazine">
<div style="background-image:url(images/01.jpg);"></div>
<div style="background-image:url(images/02.jpg);"></div>
<div style="background-image:url(images/03.jpg);"></div>
<div style="background-image:url(images/04.jpg);"></div>
<div style="background-image:url(images/05.jpg);"></div>
<div style="background-image:url(images/06.jpg);"></div>
</div>
<script type="text/javascript">
$(‘#magazine’).turn({width: 612, height: 400, acceleration: true});
</script>

[/html]

JS引用代码:

[js]

<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/turn.min.js"></script>

[/js]

CSS代码:

参数说明:

width: 612    宽度
height: 400   高度
page (type: number, default: 1)    返回当前第几页
shadows (type: boolean, default: true)   跳到到指定页数
duration (type: number, default: 600)    渐变
acceleration (type: boolean, default: true)  硬件加速

 

转载请注明:爱上JQuery » 第38款插件:turn.js实现翻书效果

turn.js实现翻书效果

标签:style   http   io   ar   sp   java   strong   on   div   

原文地址:http://www.cnblogs.com/focai/p/4156970.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!