欢迎您访问我爱IT技术网，今天小编为你分享的电脑教程是建站经验系列之：【帮助你生成翻页效果的jQuery插件 - bookblock】，下面是详细的分享！
帮助你生成翻页效果的jQuery插件 - bookblock
今天我们介绍一个漂亮的jQuery翻页效果插件 - bookblock，使用它可以创建动态的类似书本翻页效果的幻灯。希望大家喜欢!
这个插件依赖于jQuery++，这个类库是一个jQuery的扩展类库，这里使用了它的swipe事件。
HTML代码
主要html代码如下，生成需要展示的图片内容：
Javacript代码
$(function() { var Page=(function() { var config={ $bookBlock: $( '#bb-bookblock' ), $navNext : $( '#bb-nav-next' ), $navPrev : $( '#bb-nav-prev' ), $navJump : $( '#bb-nav-jump' ), bb : $( '#bb-bookblock' ).bookblock( { speed : 800, shadowSides : 0.8, shadowFlip : 0.7 } ) }, init=function() { initEvents(); }, initEvents=function() { var $slides=config.$bookBlock.children(), totalSlides=$slides.length; // add navigation events config.$navNext.on( 'click', function() { config.bb.next(); return false; } ); config.$navPrev.on( 'click', function() { config.bb.prev(); return false; } ); config.$navJump.on( 'click', function() { config.bb.jump( totalSlides ); return false; } ); // add swipe events $slides.on( { 'swipeleft' : function( event ) { config.bb.next(); return false; }, 'swiperight' : function( event ) { config.bb.prev(); return false; } } ); }; return { init : init }; })(); Page.init(); });
主要参数
主要参数如下：
// speed for the flip transition in ms.
speed : 1000,
// easing for the flip transition.
easing : 'ease-in-out',
// if set to true, both the flipping page and the sides will have an overlay to simulate shadows
shadows : true,
// opacity value for the "shadow" on both sides (when the flipping page is over it).
// value : 0.1 - 1
shadowSides : 0.2,
// opacity value for the "shadow" on the flipping page (while it is flipping).
// value : 0.1 - 1
shadowFlip : 0.1,
// perspective value
perspective : 1300,
// if we should show the first item after reaching the end.
circular : false,
// if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'.
nextEl : '',
// if we want to specify a selector that triggers the prev() function.
prevEl : '',
// callback after the flip transition.
// page is the current item's index.
// isLimit is true if the current page is the last one (or the first one).
onEndFlip : function( page, isLimit ) { return false; },
// callback before the flip transition.
// page is the current item's index.
onBeforeFlip: function( page ) { return false; }
希望大家喜欢这个插件，如果你有任何问题，请给我们留言，谢谢!
来源：帮助你生成翻页效果的jQuery插件 - bookblock
以上所分享的是关于帮助你生成翻页效果的jQuery插件 - bookblock，下面是编辑为你推荐的有价值的用户互动：
相关问题：jquery menu 插件
答：我这里有两个垂直导航的demo 希望可以帮助你 >>详细
相关问题：jQuery的zoom插件如何设置
答：我这里有个附加demo 和含文档说明的！例子！希望可以帮助你 jQuery Cloud Zoom：图片放大镜插件 我爱模板推荐 jQuery Cl... >>详细
相关问题：开发一个页面可以多次使用的jquery插件需要注意什么？
答：具体不知道你是怎么使用的。 如果你使用的插件都是基于jquery开发的是不会出错的，如果你用了jquery的插件还用了其他插件比如extjs的，那就会有冲突，很有可能会出错 第一：使用jquery需要引入jquery.1.x.js，注意是先引入jquery,js文件，如果你... >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-