分享生成翻页效果的jQuery插件-bookblock

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

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

HTML代码

主要html代码如下，生成需要展示的图片内容： <div id="bb-bookblock"> <div> <a href="http://www.gbin1.com"><img src="images/animals/a.jpg" alt="image01"/></a> </div> <div> <a href="http://www.gbin1.com"><img src="images/animals/b.jpg" alt="image02"/></a> </div> <div> <a href="http://www.gbin1.com"><img src="images/animals/c.jpg" alt="image03"/></a> </div> <div> <a href="http://www.gbin1.com"><img src="images/animals/d.jpg" alt="image04"/></a> </div> <div> <a href="http://www.gbin1.com"><img src="images/animals/e.jpg" alt="image05"/></a> </div> <div> <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; }

希望大家喜欢这个插件。

本文来自成都品牌网站建设网站设计公司-创新互联

本文名称：分享生成翻页效果的jQuery插件-bookblock
地址分享：https://www.cdcxhl.com/news16/326866.html

成都网站建设公司_创新互联，为您提供定制网站、云服务器、关键词优化、虚拟主机、搜索引擎优化、动态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联