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>
元素作为书本的容器即可。
<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' | 设置书中所有页的前景色 |
slope | Integer | 0 | slope模式 |
border | Integer | 30 | 图片的边框大小 |
language | String | 'en' | 使用的语言('en', 'ru') |
cesh | Boolean | 'true' | cesh images |
OneBook3D插件的官方主页地址为:http://onebook3d.riadesign.ru/