jQuery翻书特效插件OneBook3D

所属分类:其他-动画效果,独立的部件

 4153  43  查看评论 (2)
jQuery翻书特效插件OneBook3D ie兼容10

简要教程

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翻书插件的可用配置参数有:

参数类型默认值描述
startPageInteger1在书本初始化时显示的页。
flipString'soft'翻转动画的类型
skinString'dark'书本的皮肤模式('dark'或'light')
bgDarkString''设置'light'模式下的背景图片
bgLightString''设置'dark'模式下的背景图片
pageСolorString'white''white' 设置书中所有页的前景色
slopeInteger0slope模式
borderInteger30图片的边框大小
languageString'en'使用的语言('en', 'ru')
ceshBoolean'true'cesh images


相关插件-动画效果,独立的部件

创意链接效果

今天,我们想与你分享一些实验性和创造性的链接效果。我们的想法是使用伪元素和动画创建一个微妙的和现代的效果。在例子中,我们使用悬停过渡,但你也可以想像这些点击或作为初始动画效果。
  动画效果
 9879  74

文字插件特效_文字动画特效js插件

此插件是针对文字写的一个动画插件,主要可运用在开场和出场的时候,插件方便小巧,只需要配置参数即可达到数十种动画效果
  动画效果
 10195  224

SVG路径动画效果插件Vivus

使用H5 SVG,可沿文字或图形的路径生成动画
  动画效果
 6281  90

jquery新婚快乐

jquery新婚快乐动画效果
  动画效果
 9278  82

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币

    中象影视文化传媒 0
    2016/11/19 1:11:28

    支持,非常喜欢

        平行线0
        2016/12/30 11:12:49

        为什么我把DEMO下载,在本地实现不了,急!!!

    回复
取消回复
    PROMULGATOR

    刘先盛

    上海市鹏博士