bookblock:可帮助你生成翻页效果的jQuery插件
今天我们介绍一个漂亮的jQuery翻页效果插件 - bookblock,使用它可以创建动态的类似书本翻页效果的幻灯。希望大家喜欢!
本地下载: 在线演示
这个插件依赖于jQuery++,这个类库是一个jQuery的扩展类库,这里使用了它的swipe事件。
HTML代码
主要html代码如下,生成需要展示的图片内容:
Javacript代码
主要参数
主要参数如下:
// 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; }
希望大家喜欢这个插件,如果你有任何问题,请给我们留言,谢谢!
感谢 GBin1.com 投稿
本地下载: 在线演示
这个插件依赖于jQuery++,这个类库是一个jQuery的扩展类库,这里使用了它的swipe事件。
HTML代码
主要html代码如下,生成需要展示的图片内容:
- <div id="bb-bookblock" class="bb-bookblock">
- <div class="bb-item">
- <a href="http://www.gbin1.com"><img src="images/animals/a.jpg" alt="image01"/></a>
- </div>
- <div class="bb-item">
- <a href="http://www.gbin1.com"><img src="images/animals/b.jpg" alt="image02"/></a>
- </div>
- <div class="bb-item">
- <a href="http://www.gbin1.com"><img src="images/animals/c.jpg" alt="image03"/></a>
- </div>
- <div class="bb-item">
- <a href="http://www.gbin1.com"><img src="images/animals/d.jpg" alt="image04"/></a>
- </div>
- <div class="bb-item">
- <a href="http://www.gbin1.com"><img src="images/animals/e.jpg" alt="image05"/></a>
- </div>
- <div class="bb-item">
- <a href="http://www.gbin1.com"><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; }
希望大家喜欢这个插件,如果你有任何问题,请给我们留言,谢谢!
感谢 GBin1.com 投稿
【bookblock:可帮助你生成翻页效果的jQuery插件】相关文章
1. bookblock:可帮助你生成翻页效果的jQuery插件
2. bookblock:可帮助你生成翻页效果的jQuery插件
3. 一款帮助你生成非常有趣的扇形扑克牌风格特效的jQuery插件-Baraja ...
4. 一款帮助你生成非常有趣的扇形扑克牌风格特效的jQuery插件-Baraja ...
5. 帮助你检测客户端浏览器和分辨率的jQuery插件 - Conditionizr
6. 帮助你检测客户端浏览器和分辨率的jQuery插件 - Conditionizr
本文来源:https://www.51html5.com/a660.html
﹝bookblock:可帮助你生成翻页效果的jQuery插件﹞相关内容
- 随机字符变换效果的jQuery插件开发教程
- 随机字符变换效果的jQuery插件开发教程
- 带幻灯片效果的全屏背景jQuery插件:Vegas2
- RIM:转向BlackBerry 10平台全面支持HTML5
- BlackBerry Jam亚洲开发大会即将召开
- 2012 BlackBerry 10移动应用开发大赛正式开幕
- Blackberry 10展示强悍的HTML5性能
- Bootstrap3,JQuery倒计时插件和Animate.css生成的倒计时效果
- 帮助更语义化的显示时间的jQuery插件
- 帮助更语义化的显示时间的jQuery插件