HTML5教程

当前位置: HTML5技术网 > HTML5教程 > bookblock:可帮助你生成翻页效果的jQuery插件

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

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

      


       本地下载:    在线演示

  这个插件依赖于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() {

  2.         var Page = (function() {

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

  15.                                 initEvents();
  16.                                 
  17.                         },
  18.                         initEvents = function() {

  19.                                 var $slides = config.$bookBlock.children(),
  20.                                                 totalSlides = $slides.length;

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

  23.                                         config.bb.next();
  24.                                         return false;

  25.                                 } );

  26.                                 config.$navPrev.on( 'click', function() {
  27.                                        
  28.                                         config.bb.prev();
  29.                                         return false;

  30.                                 } );

  31.                                 config.$navJump.on( 'click', function() {
  32.                                        
  33.                                         config.bb.jump( totalSlides );
  34.                                         return false;

  35.                                 } );
  36.                                 
  37.                                 // add swipe events
  38.                                 $slides.on( {

  39.                                         'swipeleft'                : function( event ) {
  40.                                        
  41.                                                 config.bb.next();
  42.                                                 return false;

  43.                                         },
  44.                                         'swiperight'        : function( event ) {
  45.                                        
  46.                                                 config.bb.prev();
  47.                                                 return false;
  48.                                                 
  49.                                         }

  50.                                 } );

  51.                         };

  52.                         return { init : init };

  53.         })();

  54.         Page.init();

  55. });
复制代码



  主要参数

  主要参数如下:

  // 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 投稿

【bookblock:可帮助你生成翻页效果的jQuery插件】相关文章

1. bookblock:可帮助你生成翻页效果的jQuery插件

2. bookblock:可帮助你生成翻页效果的jQuery插件

3. 一款帮助你生成非常有趣的扇形扑克牌风格特效的jQuery插件-Baraja ...

4. 一款帮助你生成非常有趣的扇形扑克牌风格特效的jQuery插件-Baraja ...

5. 帮助你检测客户端浏览器和分辨率的jQuery插件 - Conditionizr

6. 帮助你检测客户端浏览器和分辨率的jQuery插件 - Conditionizr

7. 帮助快速生成页面固定显示元素的jQuery插件

8. 帮助快速生成页面固定显示元素的jQuery插件

9. 简单做出HTML5翻页效果文字特效

10. turn.js:超酷的杂志翻页效果HTML5实现

本文来源:https://www.51html5.com/a660.html

点击展开全部

﹝bookblock:可帮助你生成翻页效果的jQuery插件﹞相关内容

「bookblock:可帮助你生成翻页效果的jQuery插件」相关专题

其它栏目

也许您还喜欢