今天我們介紹一個漂亮的jQuery翻頁效果插件 - bookblock,使用它可以創建動態的類似書本翻頁效果的幻燈。希望大家喜歡!
這個插件依賴于jQuery++,這個類庫是一個jQuery的擴展類庫,這里使用了它的swipe事件。
HTML代碼
主要html代碼如下,生成需要展示的圖片內容:
<div id="bb-bookblock"> <div> <a ><img src="images/animals/a.jpg" alt="image01"/></a> </div> <div> <a ><img src="images/animals/b.jpg" alt="image02"/></a> </div> <div> <a ><img src="images/animals/c.jpg" alt="image03"/></a> </div> <div> <a ><img src="images/animals/d.jpg" alt="image04"/></a> </div> <div> <a ><img src="images/animals/e.jpg" alt="image05"/></a> </div> <div> <a ><img src="images/animals/f.jpg" alt="image05"/></a> </div> </div>
Javacript代碼
$(function() { var Page = (function() { var config = { $bookBlock: $( '#bb-bookblock' ), $navNext : $( '#bb-nav-next' ), $navPrev : $( '#bb-nav-prev' ), $navJump : $( '#bb-nav-jump' ), bb : $( '#bb-bookblock' ).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( 'click', function() { config.bb.next(); return false; } ); config.$navPrev.on( 'click', function() { config.bb.prev(); return false; } ); config.$navJump.on( 'click', function() { config.bb.jump( totalSlides ); return false; } ); // add swipe events $slides.on( { 'swipeleft' : function( event ) { config.bb.next(); return false; }, 'swiperight' : function( event ) { config.bb.prev(); return false; } } ); }; return { init : init }; })(); Page.init(); });
主要參數
主要參數如下:
// 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; }
希望大家喜歡這個插件。
本文來自成都品牌網站建設網站設計公司-創新互聯
本文名稱:分享生成翻頁效果的jQuery插件-bookblock
地址分享:http://m.newbst.com/news16/326866.html
成都網站建設公司_創新互聯,為您提供定制網站、云服務器、關鍵詞優化、虛擬主機、搜索引擎優化、動態網站
廣告
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源:
創新互聯