中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

分享生成翻頁(yè)效果的jQuery插件-bookblock

2024-04-30    分類: 網(wǎng)站建設(shè)

今天我們介紹一個(gè)漂亮的jQuery翻頁(yè)效果插件 - bookblock,使用它可以創(chuàng)建動(dòng)態(tài)的類似書(shū)本翻頁(yè)效果的幻燈。希望大家喜歡!

這個(gè)插件依賴于jQuery++,這個(gè)類庫(kù)是一個(gè)jQuery的擴(kuò)展類庫(kù),這里使用了它的swipe事件。

HTML代碼

主要html代碼如下,生成需要展示的圖片內(nèi)容: <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(); });

主要參數(shù)

主要參數(shù)如下:

// 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; }

希望大家喜歡這個(gè)插件。

本文來(lái)自成都品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)公司-創(chuàng)新互聯(lián)

本文名稱:分享生成翻頁(yè)效果的jQuery插件-bookblock
地址分享:http://m.rwnh.cn/news16/326866.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制網(wǎng)站云服務(wù)器、關(guān)鍵詞優(yōu)化虛擬主機(jī)、搜索引擎優(yōu)化、動(dòng)態(tài)網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)
亚东县| 黄陵县| 徐州市| 休宁县| 安顺市| 崇明县| 邢台市| 长白| 盐边县| 乌鲁木齐市| 平武县| 丽水市| 广丰县| 十堰市| 仙桃市| 嘉义县| 吴忠市| 文昌市| 新化县| 静宁县| 浮梁县| 黔西| 土默特左旗| 廉江市| 莫力| 陕西省| 上栗县| 泗洪县| 含山县| 邯郸市| 古丈县| 通江县| 霍邱县| 阿拉善左旗| 梁河县| 仁化县| 溧阳市| 韶关市| 临安市| 洛南县| 阜城县|