新浪微博 登陆  注册   设为首页 加入收藏

学PHP >> HTML5教程 >> bookblock:可帮助你生成翻页效果的jQuery插件

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

查看次数5985 发表时间2013-01-23 14:30:03

  今天我们介绍一个漂亮的jQuery翻页效果插件 - bookblock,使用它可以创建动态的类似书本翻页效果的幻灯。希望大家喜欢!              本地下载:    在线...
  今天我们介绍一个漂亮的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 投稿

(转发请注明转自:学PHP)    


  相关推荐




  发表评论
昵称:
(不超过20个字符或10个汉字)
内容: