BookBlock-JQuery翻页书册插件

BookBlock-JQuery翻页书册插件
 点击预览  点击下载

BookBlock 是一个 jQuery 插件,用来制作带有翻页效果的小书册。可以用任何形式的内容,比如图像或文本。插件会在翻页时利用变形模拟手工翻页,并产生重叠的阴影以达到更逼真的效果。

BookBlock-JQuery翻页书册插件

我们将使用jQuery + +,这有一些附加组件Bitovi为jQuery(具体来说,添加刷卡事件)。下面的结构将允许添加自定义的内容在一个容器类“cf-item”,它表示一个打开的页面(左边和右边):

  1. <div id="bb-bookblock" class="bb-bookblock"> 
  2.     <div class="bb-item"> 
  3.         <!-- custom content --> 
  4.     </div> 
  5.     <div class="bb-item"> 
  6.          
  7.     </div> 
  8.     <div class="bb-item"> 
  9.         <!-- ... --> 
  10.     </div> 
  11.     <div class="bb-item"> 
  12.         <!-- ... --> 
  13.     </div> 
  14.     <!-- ... --> 
  15. </div> 

使用插件:

  1. $(function() {   
  2.     $( '#bb-bookblock' ).bookblock(); 
  3. }); 

设置:

  1. // speed for the flip transition in ms. 
  2. speed       : 1000, 
  3.  
  4. // easing for the flip transition. 
  5. easing      : 'ease-in-out'
  6.  
  7. // if set to true, both the flipping page and the sides will have an overlay to simulate shadows 
  8. shadows     : true
  9.  
  10. // opacity value for the "shadow" on both sides (when the flipping page is over it). 
  11. // value : 0.1 - 1 
  12. shadowSides : 0.2, 
  13.  
  14. // opacity value for the "shadow" on the flipping page (while it is flipping). 
  15. // value : 0.1 - 1 
  16. shadowFlip  : 0.1, 
  17.  
  18. // perspective value 
  19. perspective : 1300, 
  20.  
  21. // if we should show the first item after reaching the end. 
  22. circular    : false
  23.  
  24. // if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'. 
  25. nextEl      : ''
  26.  
  27. // if we want to specify a selector that triggers the prev() function. 
  28. prevEl      : ''
  29.  
  30. // If true it overwrites the circular option to true! 
  31. autoplay        : false
  32.          
  33. // time (ms) between page switch, if autoplay is true.  
  34. interval        : 3000, 
  35.  
  36. // callback after the flip transition. 
  37. // page is the current item's index. 
  38. // isLimit is true if the current page is the last one (or the first one). 
  39. onEndFlip   : function( page, isLimit ) { return false; }, 
  40.  
  41. // callback before the flip transition. 
  42. // page is the current item's index. 
  43. onBeforeFlip: function( page ) { return false; } 

转载请注明:代码家园 » BookBlock-JQuery翻页书册插件

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)