注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery 翻书效果插件OneBook3d

媒体 fishcity 2446浏览

jquery 翻书OneBook3d

OneBook3D翻书效果对于摄影师和设计师来说是一款非常酷又实用的jquery插件,使用OneBook3D很容易地创建一个引人注目的书籍、杂志或相册。插件具有极强的灵活性、适应性和可定制性,同时插件会自动调整图像,且有全屏模式,不得不说这是一个非常理想的相册!

注意:插件在本地上会有一些功能无法使用,但在web服务端则完全可用。只运行于:Chrome, Opera (WebKit), Firefox 和 Safari,需要1.X和2.X的jquery版本和MouseWheel (3.1.9+) 。

jquery实例:OneBook3d使用方法

引入核心文件

<script type="text/javascript" src="./js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="./js/jquery.onebook3d.min.js"></script>

构建html

<div id="photobook" style="height:100px;"></div>

写入JS初始化

//定义图片数组
//
var arr = ['./gallery/001.jpg','./gallery/002.jpg','./gallery/003.jpg','./gallery/004.jpg','./gallery/005.jpg','./gallery/006.jpg','./gallery/007.jpg','./gallery/008.jpg','./gallery/009.jpg','./gallery/010.jpg'];

//带标题
var arr = [
		['./g06/001.jpg','Photo 2014'],		
		['./g06/003.jpg','Photo 1'],['./g06/009.jpg','Photo 2'],
		['./g06/006.jpg','Photo 3'],['./g06/002.jpg','Photo 4'],
		['./g06/008.jpg','Photo 5'],['./g06/010.jpg','Photo 6'],
		['./g06/007.jpg','Photo 7'],['./g06/011.jpg','Photo 8'],
		['./g06/005.jpg','Photo 9']
	];
//带或是不带标题
var arr = [
    [’./gallery/001.jpg’,’title1’],
    ’./gallery/002.jpg’,
    ’./gallery/003.jpg’,
    [’./gallery/004.jpg’,’title4’],
    [’./gallery/005.jpg’,’title5’],
    ’./gallery/006.jpg’
];	

//调用方式
$('#div0').onebook( arr0);
$('#div1').onebook( arr1, { flip:'soft', border:25 });
$('#div2').onebook( arr2, { skin:'light', flip:'soft', startPage:6 });
$('#div3').onebook( arr3, { slope:1, pageColor:’gold’ });
$('#div4').onebook( arr4, { flip:'soft', border:25, slope:1 });
$('#div5').onebook( arr5, { skin:'dark', bgDark:’url(”./images/bg.jpg”)’, flip:'soft'});
$('#div6').onebook( arr6, { skin:'light', bgLight:’url(”./images/bg2.jpg”);background-size:cover;’ });

//点击后显示
$('#link1').click(function(){
	$.onebook( arr7, { skin:'light', flip:’ocean’, border:0, cesh:false })
  });			

参数选项

 startPage–int, 起始页, default:1

 flip–string (’basic’,’soft’), 动画形式, default:’basic’

 skin–string (’dark’,’light’), 皮肤.  default:’dark’

 bgDark–text/css, 设置背景为黑色主题, default:’’

 bgLight–text/css, 设置主题为白色主题, default:’’

 pageСolor–text/css, 设置页数的字体颜色, default:’white’

 slope–int (0 | 1 | 2), 倾斜模式, default: 0 

 border–int, 图片到边框的距离, default:30

 language–string (’en’, ‘ru’), 主题语言, default:’en’

 cesh–boolean (true/false), cesh images, default:true

转载请注明:jQ酷 » jquery 翻书效果插件OneBook3d

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。