jQuery和css3全屏翻页切换页面特效-HTML源码网

这是一款效果非常酷的jQuery和css3全屏翻页切换页面特效插件。该插件是在BookBlock可预览的css3+js翻书效果的基础上，添加了侧边栏，和前后翻页按钮制作而成的。在插件中我们还集成了 jScrollPane 用来自定义滚动条元素。

下面的jQuery插件将在该插件中被使用：

HTML结构

.container作为wrapper。在里面，使用一个div .menu-panel作为侧边栏。“书本”使用.bb-custom-wrapper包裹起来。

<div id="container" class="container">  

  <div class="menu-panel">
    <h3>Table of Contents</h3>
    <ul id="menu-toc" class="menu-toc">
      <li class="menu-toc-current"><a href="#item1">Self-destruction</a></li>
      <li><a href="#item2">Why we die</a></li>
      <li><a href="#item3">The honeymoon</a></li>
      <li><a href="#item4">A drawing joke</a></li>
      <li><a href="#item5">Commencing practice</a></li>
    </ul>
  </div>

  <div class="bb-custom-wrapper">

    <div id="bb-bookblock" class="bb-bookblock">

      <div class="bb-item" id="item1">
        <div class="content">
          <div class="scroller">
            <h2>Self-destruction</h2>
            <p>...</p>
          </div>
        </div><!-- /content -->
      </div><!-- /bb-item -->

      <div class="bb-item" id="item2"><!-- ... --></div>

      <div class="bb-item" id="item3"><!-- ... --></div>

      <div class="bb-item" id="item4"><!-- ... --></div>

      <div class="bb-item" id="item5"><!-- ... --></div>

    </div><!-- /bb-bookblock -->
    
    <nav>
      <a id="bb-nav-prev" href="#">←</a>
      <a id="bb-nav-next" href="#">→</a>
    </nav>

    <span id="tblcontents" class="menu-button">Table of Contents</span>

  </div><!-- /bb-custom-wrapper -->

</div><!-- /container -->

JAVASCRIPT

我们需要指定每次翻页之后，当前项的index和jScrollPane 的状态，这些通过onEndFlip 在BookBlock的回调中指定：

var $container = $( '#container' ),

  // the element we will apply the BookBlock plugin to
  $bookBlock = $( '#bb-bookblock' ),

  // the BookBlock items (bb-item)
  $items = $bookBlock.children(),

  // index of the current item
  current = 0,

  // initialize the BookBlock
  bb = $( '#bb-bookblock' ).bookblock( {
    speed : 800,
    perspective : 2000,
    shadowSides : 0.8,
    shadowFlip  : 0.4,
    // after each flip...
    onEndFlip : function(old, page, isLimit) {
      
      // update the current value
      current = page;

      // update the selected item of the table of contents (TOC)
      updateTOC();

      // show and/or hide the navigation arrows
      updateNavigation( isLimit );

      // initialize the jScrollPane on the content div for the new item
      setJSP( 'init' );

      // destroy jScrollPane on the content div for the old item
      setJSP( 'destroy', old );

    }
  } ),
  // the navigation arrows
  $navNext = $( '#bb-nav-next' ),
  $navPrev = $( '#bb-nav-prev' ).hide(),

  // the table of content items
  $menuItems = $container.find( 'ul.menu-toc > li' ),

  // button to open the TOC
  $tblcontents = $( '#tblcontents' ),

  transEndEventNames = {
    'WebkitTransition': 'webkitTransitionEnd',
    'MozTransition': 'transitionend',
    'OTransition': 'oTransitionEnd',
    'msTransition': 'MSTransitionEnd',
    'transition': 'transitionend'
  },

  // transition event name
  transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],

  // check if transitions are supported
  supportTransitions = Modernizr.csstransitions;

在元素初始化时为它们绑定一些事件，同时我们需要初始化jScrollPane 的当前项。

function init() {
  // initialize jScrollPane on the content div of the first item
  setJSP( 'init' );
  initEvents();
}

因为我们最终需要初始化和销毁jScrollPane，因此，可以定义一个函数来做这些事情。

function setJSP( action, idx ) {
  var idx = idx === undefined ? current : idx,
    $content = $items.eq( idx ).children( 'div.content' ),
    apiJSP = $content.data( 'jsp' );
  if( action === 'init' && apiJSP === undefined ) {
    $content.jScrollPane({verticalGutter : 0, hideFocus : true });
  }
  else if( action === 'reinit' && apiJSP !== undefined ) {
    apiJSP.reinitialise();
  }
  else if( action === 'destroy' && apiJSP !== undefined ) {
    apiJSP.destroy();
  }
}

我们需要绑定一些事件：

1、当我们点击前后翻页导航按钮时，我们需要调用BookBlock的next() 和 prev()方法。
2、当我们点击侧边栏按钮时，侧边栏将被显示/隐藏。
3、当我们点击侧边栏选项时，将调用BookBlock的jump()方法。
4、jScrollPane将在窗口变化时被重置。

function initEvents() {
  // add navigation events
  $navNext.on( 'click', function() {
    bb.next();
    return false;
  } );
  $navPrev.on( 'click', function() {
    bb.prev();
    return false;
  } );
  // add swipe events
  $items.on( {
    'swipeleft'   : function( event ) {
      if( $container.data( 'opened' ) ) {
        return false;
      }
      bb.next();
      return false;
    },
    'swiperight'  : function( event ) {
      if( $container.data( 'opened' ) ) {
        return false;
      }
      bb.prev();
      return false;
    }
  } );
  // show TOC
  $tblcontents.on( 'click', toggleTOC );
  // click a menu item
  $menuItems.on( 'click', function() {
    var $el = $( this ),
      idx = $el.index(),
      jump = function() {
        bb.jump( idx + 1 );
      };   
    current !== idx ? closeTOC( jump ) : closeTOC();
    return false;
  } );
  // reinit jScrollPane on window resize
  $( window ).on( 'debouncedresize', function() {
    // reinitialise jScrollPane on the content div
    setJSP( 'reinit' );
  } );
}

前后翻页导航按钮的可见性将依赖与当前页面。如果我们是在第一页，则向前翻页导航按钮不可见。如果是在最后一页，则向后翻页导航按钮不可见。

function updateNavigation( isLastPage ) {
  if( current === 0 ) {
    $navNext.show();
    $navPrev.hide();
  }
  else if( isLastPage ) {
    $navNext.hide();
    $navPrev.show();
  }
  else {
    $navNext.show();
    $navPrev.show();
  }
}

当我们打开侧边栏时，要隐藏前后翻页导航按钮，关闭侧边栏时在重新显示它们。

我们将使用CSS transition来制作侧边栏的动画效果。如果浏览器不支持CSS transition，那么这里只是简单的显示和隐藏侧边栏菜单。

function toggleTOC() {
  var opened = $container.data( 'opened' );
  opened ? closeTOC() : openTOC();
}
function openTOC() {
  $navNext.hide();
  $navPrev.hide();
  $container.addClass( 'slideRight' ).data( 'opened', true );
}
function closeTOC( callback ) {
  $navNext.show();
  $navPrev.show();
  $container.removeClass( 'slideRight' ).data( 'opened', false );
  if( callback ) {
    if( supportTransitions ) {
      $container.on( transEndEventName, function() {
        $( this ).off( transEndEventName );
        callback.call();
      } );
    }
    else {
      callback.call();
    }
  }
}