jQuery翻书特效插件OneBook3D

查看演示立即下载

插件描述：OneBook3D是一款逼真的jQuery翻书特效插件。该插件将多张图片或文件组合为书本杂志来进行翻页查看。

简要教程

OneBook3D是一款逼真的jQuery翻书特效插件。该插件将多张图片或文件组合为书本杂志来进行翻页查看。它支持webGL，可以应用在移动手机上，速度和性能都非常好。

使用方法

在页面中引入jquery.onebook3d2.min.js以及它相关的依赖文件：

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/treejs.min.js"></script>
<script src="js/jquery.onebook3d2.min.js"</script>

HTML结构

使用一个<div>元素作为书本的容器即可。

1	`<div` `id="mybook"></div>`

初始化插件

首先将需要的图片放入一个数组中：

var arr=['./gallery/001.jpg','./gallery/002.jpg','./gallery/003.jpg',...];
// 或者
var arr=[['./001.jpg','title1'],['./002.jpg',title2],['./003.jpg',title3],...];

然后在DOM元素加载完毕之后，通过onebook()方法来初始化该插件。

$('#mybook').onebook(arr,{
    skin:['light','dark'], 
    bgDark:'#222222 url(./bg.jpg)', 
    flip:'soft', 
    border:25
});
  
// 或者
  
$('a').click(function(){
   $.onebook(arr,{border:100,bgDark:'#777777', cesh:false});
});

配置参数

OneBook3D翻书插件的可用配置参数有：

参数	类型	默认值	描述
startPage	Integer	1	在书本初始化时显示的页。
flip	String	'soft'	翻转动画的类型
skin	String	'dark'	书本的皮肤模式（'dark'或'light'）
bgDark	String	''	设置'light'模式下的背景图片
bgLight	String	''	设置'dark'模式下的背景图片
pageСolor	String	'white'	'white' 设置书中所有页的前景色
slope	Integer	0	slope模式
border	Integer	30	图片的边框大小
language	String	'en'	使用的语言（'en', 'ru'）
?cesh	Boolean	'true'	cesh images

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： 404错误页面模板
下一个特效： jQuery表格生成插件Table.js