turn.js实现翻书效果
JS插件网 http://www.ijquery.cn/?p=173
描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备。
Turn.js 支持硬件加速来让翻页效果更加平滑。
可通过 API 来获取当前显示的页号,并提供选项来定制默认页号、加速器、阴影和延时。
图片展示:
兼容浏览器: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实现翻书效果
最新文章
- 浏览器兼容性之Css篇
- How To Use Proguard in Android APP
- tornado 学习笔记4 异步以及非阻塞的I/O
- 转:NLog之:文件类型目标(File target)
- 细菌觅食算法-python实现
- 【poj1080】 Human Gene Functions
- Update与FixedUpdate区别
- Jquery实现购物车物品数量的加减特效
- 解决matplotlib中文乱码问题(Windows)
- 一道关于比赛胜负的Sql查询题目
- asp.net中webservice与android的json数据交互方式设置
- MFRCC522 SPI无法通讯【worldsing笔记】
- redis入门(转)
- android Android性能优化之如何避免Overdraw
- glusterfs 4.0.1 event模块 分析笔记1
- JS正则表达式验证是否为11位有效手机号码
- get load 代理对象
- javascript时间日期操作
- Python:基础知识(二)
- Go语言Web框架gwk介绍 (二)