免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 PSD 矢量 网页 PPT 动画
美女 唯美 大生活 美图 风景 时尚艺
资讯 综合 专题 热点
您的位置: 广信之家 > 免费资源 > 免费插件 > 文章正文

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

时间:09-20 15:20 来源:gbin1.com 整理:广信小编 我要评论(0)
字号:T|T
内容提要:
  今天我们介绍一个漂亮的jQuery翻页效果插件 - bookblock,使用它可以创建动态的类似书本翻页效果的幻灯。希望大家喜欢!

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

在线演示  本地下载

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

这个插件依赖于jQuery++,这个类库是一个jQuery的扩展类库,这里使用了它的swipe事件。

HTML代码

主要html代码如下,生成需要展示的图片内容:

<div id="bb-bookblock" class="bb-bookblock">
       <div class="bb-item">
              <a href="http://upload.chinaz.com//" alt="image01"/></a>
       </div>
       <div class="bb-item">
              <a href="http://upload.chinaz.com//" alt="image02"/></a>
       </div>
       <div class="bb-item">
              <a href="http://upload.chinaz.com//" alt="image03"/></a>
       </div>
       <div class="bb-item">
              <a href="http://upload.chinaz.com//" alt="image04"/></a>
       </div>
       <div class="bb-item">
              <a href="http://upload.chinaz.com//" alt="image05"/></a>
       </div>
       <div class="bb-item">
              <a href="http://upload.chinaz.com//" 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

    相关阅读:

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    免责申明:以上内容仅代表原创者观点,其内容未经本站证实,帮助你生成翻页效果的jQuery插件-bookblock对以上内容的真实性、完整性不作任何保证或承诺,转载目的在于传递更多信息,由此产生的后果与帮助你生成翻页效果的jQuery插件-bookblock无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

    登录 (请登录发言,并遵守 相关规定)
    如果你对广信之家有任何意见或建议,请到交流平台反馈。到留言板反馈