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翻书插件截图效果-1

OneBook3D翻书插件截图效果-2

OneBook3D翻书插件截图效果-3

配置参数

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/