bookblock：可帮助你生成翻页效果的jQuery插件-H5 Tutorial-php.cn

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

PHP中文网

Release： 2016-05-17 09:08:41

Original

1913 people have browsed it

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

　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>

Copy after login

　　Javacript代码

$(function() {

var Page = (function() {

var config = {
     $bookBlock: $( &#39;#bb-bookblock&#39; ),
     $navNext        : $( &#39;#bb-nav-next&#39; ),
     $navPrev        : $( &#39;#bb-nav-prev&#39; ),
     $navJump        : $( &#39;#bb-nav-jump&#39; ),
     bb : $( &#39;#bb-bookblock&#39; ).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( &#39;click&#39;, function() {

     config.bb.next();
     return false;

    } );

   config.$navPrev.on( &#39;click&#39;, function() {
                                        
    config.bb.prev();
    return false;

   } );

   config.$navJump.on( &#39;click&#39;, function() {
                                        
   config.bb.jump( totalSlides );
  return false;

   } );
                                
   // add swipe events
  $slides.on( {

  &#39;swipeleft&#39;                : function( event ) {
                                        
  config.bb.next();
  return false;

 },
 &#39;swiperight&#39;        : function( event ) {
                                        
  config.bb.prev();
 return false;
                                                
}

 } );

 };

 return { init : init };

})();

Page.init();

});

Copy after login

主要参数

主要参数如下：

// speed for the flip transition in ms.

　　speed : 1000,

　　// easing for the flip transition.

　　easing : &#39;ease-in-out&#39;,

　　// 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: &#39;#bb-nav-next&#39;.

　　nextEl : &#39;&#39;,

　　// if we want to specify a selector that triggers the prev() function.

　　prevEl : &#39;&#39;,

　　// callback after the flip transition.

　　// page is the current item&#39;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&#39;s index.

　　onBeforeFlip: function( page ) { return false; }

Copy after login

以上就是bookblock：可帮助你生成翻页效果的jQuery插件的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！