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

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

       1.png


       本地下载：demo.zip    在线演示

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

　　HTML代码

　　主要html代码如下，生成需要展示的图片内容：
  1. <div id="bb-bookblock" class="bb-bookblock">
  2.         <div class="bb-item">
  3.                 <a href="http://www.gbin1.com"><img src="images/animals/a.jpg" alt="image01"/></a>
  4.         </div>
  5.         <div class="bb-item">
  6.                 <a href="http://www.gbin1.com"><img src="images/animals/b.jpg" alt="image02"/></a>
  7.         </div>
  8.         <div class="bb-item">
  9.                 <a href="http://www.gbin1.com"><img src="images/animals/c.jpg" alt="image03"/></a>
  10.         </div>
  11.         <div class="bb-item">
  12.                 <a href="http://www.gbin1.com"><img src="images/animals/d.jpg" alt="image04"/></a>
  13.         </div>
  14.         <div class="bb-item">
  15.                 <a href="http://www.gbin1.com"><img src="images/animals/e.jpg" alt="image05"/></a>
  16.         </div>
  17.         <div class="bb-item">
  18.                 <a href="http://www.gbin1.com"><img src="images/animals/f.jpg" alt="image05"/></a>
  19.         </div>
  20. </div>
复制代码


　　Javacript代码
  1. $(function() {

  3.         var Page = (function() {

  5.                 var config = {
  6.                                 $bookBlock: $( '#bb-bookblock' ),
  7.                                 $navNext        : $( '#bb-nav-next' ),
  8.                                 $navPrev        : $( '#bb-nav-prev' ),
  9.                                 $navJump        : $( '#bb-nav-jump' ),
  10.                                 bb                                : $( '#bb-bookblock' ).bookblock( {
  11.                                         speed                                : 800,
  12.                                         shadowSides        : 0.8,
  13.                                         shadowFlip        : 0.7
  14.                                 } )
  15.                         },
  16.                         init = function() {

  18.                                 initEvents();
  19.                                 
  20.                         },
  21.                         initEvents = function() {

  23.                                 var $slides = config.$bookBlock.children(),
  24.                                                 totalSlides = $slides.length;

  26.                                 // add navigation events
  27.                                 config.$navNext.on( 'click', function() {

  29.                                         config.bb.next();
  30.                                         return false;

  32.                                 } );

  34.                                 config.$navPrev.on( 'click', function() {
  35.                                        
  36.                                         config.bb.prev();
  37.                                         return false;

  39.                                 } );

  41.                                 config.$navJump.on( 'click', function() {
  42.                                        
  43.                                         config.bb.jump( totalSlides );
  44.                                         return false;

  46.                                 } );
  47.                                 
  48.                                 // add swipe events
  49.                                 $slides.on( {

  51.                                         'swipeleft'                : function( event ) {
  52.                                        
  53.                                                 config.bb.next();
  54.                                                 return false;

  56.                                         },
  57.                                         'swiperight'        : function( event ) {
  58.                                        
  59.                                                 config.bb.prev();
  60.                                                 return false;
  61.                                                 
  62.                                         }

  64.                                 } );

  66.                         };

  68.                         return { init : init };

  70.         })();

  72.         Page.init();

  74. });
复制代码




　　主要参数

　　主要参数如下：

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

　　希望大家喜欢这个插件，如果你有任何问题，请给我们留言，谢谢!

　　感谢 GBin1.com 投稿
上一篇：在HTML5的CANVAS上绘制椭圆的几种方法 下一篇：HTML5画布下js的文字云/标签云效果 - D3 Cloud

相关文章

最新文章

Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权