软件 聊天 安全 视频 浏览器 下载 系统 办公 教学 输入法
免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 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无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

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