帮助你生成翻页效果的jQuery插件 - bookblock

最新推荐文章于 2024-06-04 09:54:10 发布

thegeek

最新推荐文章于 2024-06-04 09:54:10 发布

阅读量868

点赞数

分类专栏： jquery plugin jQuery插件 jquery 文章标签： jquery插件 function triggers image class jquery

本文链接：https://blog.csdn.net/jjfat/article/details/7999205

版权

jquery 同时被 3 个专栏收录

233 篇文章 0 订阅

订阅专栏

jQuery插件

84 篇文章 0 订阅

订阅专栏

jquery plugin

35 篇文章 0 订阅

订阅专栏

本文介绍了Bookblock，一个jQuery插件，用于创建书本翻页效果的动态幻灯。该插件依赖jQuery++，并提供了速度、阴影、过渡效果等参数设置，以及回调函数选项。

摘要由CSDN通过智能技术生成

日期：2012-9-18 来源：GBin1.com

在线演示本地下载

今天我们介绍一个漂亮的jQuery翻页效果插件 - bookblock，使用它可以创建动态的类似书本翻页效果的幻灯。希望大家喜欢！

这个插件依赖于jQuery++，这个类库是一个jQuery的扩展类库，这里使用了它的swipe事件。

HTML代码

主要html代码如下，生成需要展示的图片内容：

<div id="bb-bookblock" class="bb-bookblock">
	<div class="bb-item">
		<a href="http://www.gbin1.com"><img src="images/animals/a.jpg" alt="image01"/></a>
	</div>
	<div class="bb-item">
		<a href="http://www.gbin1.com"><img src="images/animals/b.jpg" alt="image02"/></a>
	</div>
	<div class="bb-item">
		<a href="http://www.gbin1.com"><img src="images/animals/c.jpg" alt="image03"/></a>
	</div>
	<div class="bb-item">
		<a href="http://www.gbin1.com"><img src="images/animals/d.jpg" alt="image04"/></a>
	</div>
	<div class="bb-item">
		<a href="http://www.gbin1.com"><img src="images/animals/e.jpg" alt="image05"/></a>
	</div>
	<div class="bb-item">
		<a href="http://www.gbin1.com"><img src="images/animals/f.jpg" alt="image05"/></a>
	</div>
</div>

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; }