以下是 基于jQuery页面翻转特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BookBlock: A Content Flip Plugin</title>
<meta name="description" content="BookBlock: A Content Flip Plugin" />
<meta name="keywords" content="jquery, plugin, css3, flip, page, 3d, booklet, book, perspective" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<!--<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css' />-->
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<noscript><link rel="stylesheet" type="text/css" href="css/noJS.css" /></noscript>
</head>
<body>
<div class="container">
<header>
<h1><strong>BookBlock</strong> – A Content Flip Plugin</h1>
<h2>Flip any content like in a booklet</h2>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
</nav>
<div class="support-note"><!-- let's check browser support with modernizr -->
<span class="no-csstransforms">CSS transforms are not supported in your browser</span>
<span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span>
<span class="no-csstransitions">CSS transitions are not supported in your browser</span>
</div>
</header>
<section class="main">
<div class="bb-custom-wrapper">
<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item">
<a href="#"><img src="images/demo1/1.jpg" alt="image01"/></a>
</div>
<div class="bb-item">
<a href="#"><img src="images/demo1/2.jpg" alt="image02"/></a>
</div>
<div class="bb-item">
<a href="#"><img src="images/demo1/3.jpg" alt="image03"/></a>
</div>
<div class="bb-item">
<a href="#"><img src="images/demo1/4.jpg" alt="image04"/></a>
</div>
<div class="bb-item">
<a href="#"><img src="images/demo1/5.jpg" alt="image05"/></a>
</div>
</div>
<h3>Illustrations by <a href="#">Kevin Howdeshell</a></h3>
<nav>
<a id="bb-nav-prev" href="#">Previous</a>
<a id="bb-nav-next" href="#">Next</a>
<a id="bb-nav-jump" href="#" title="Go to last item">Last page</a>
</nav>
</div>
</section>
</div>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquerypp.custom.js"></script>
<script type="text/javascript" src="js/jquery.bookblock.js"></script>
<script type="text/javascript">
$(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();
});
</script>
</body>
</html>
HTML代码(index2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BookBlock: A Content Flip Plugin</title>
<meta name="description" content="BookBlock: A Content Flip Plugin" />
<meta name="keywords" content="jquery, plugin, css3, flip, page, 3d, booklet, book, perspective" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/custom2.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<noscript><link rel="stylesheet" type="text/css" href="css/noJS.css" /></noscript>
</head>
<body>
<div class="container">
<header>
<h1><strong>BookBlock</strong> – A Content Flip Plugin</h1>
<h2>Flip any content like in a booklet</h2>
<nav class="codrops-demos">
<a href="index.html">Demo 1</a>
<a class="current-demo" href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
</nav>
<div class="support-note"><!-- let's check browser support with modernizr -->
<span class="no-csstransforms">CSS transforms are not supported in your browser</span>
<span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span>
<span class="no-csstransitions">CSS transitions are not supported in your browser</span>
</div>
</header>
<section class="main">
<ul class="bb-custom-grid" id="bb-custom-grid">
<li>
<h3>Neonmob set</h3>
<div class="bb-bookblock">
<div class="bb-item"><a href="#"><img src="images/demo2/1.jpg" alt="image01"/></a></div>
<div class="bb-item"><a href="#"><img src="images/demo2/2.jpg" alt="image02"/></a></div>
<div class="bb-item"><a href="#"><img src="images/demo2/3.jpg" alt="image03"/></a></div>
<div class="bb-item"><a href="#"><img src="images/demo2/4.jpg" alt="image04"/></a></div>
</div>
<nav>
<span class="bb-current"></span>
<span></span>
<span></span>
<span></span>
</nav>
</li>
<li>
<h3>Illustration Work</h3>
<div class="bb-bookblock">
<div class="bb-item"><a href="#"><img src="images/demo2/5.jpg" alt="image05"/></a></div>
<div class="bb-item"><a href="#"><img src="images/demo2/6.jpg" alt="image06"/></a></div>
<div class="bb-item"><a href="#"><img src="images/demo2/7.jpg" alt="image07"/></a></div>
<div class="bb-item"><a href="#"><img src="images/demo2/8.jpg" alt="image08"/></a></div>
</div>
<nav>
<span class="bb-current"></span>
<span></span>
<span></span>
<span></span>
</nav>
</li>
<li>
<h3>Everyday Monsters</h3>
<div class="bb-bookblock">
<div class="bb-item"><a href="#"><img src="images/demo2/9.jpg" alt="image09"/></a></div>
<div class="bb-item"><a href="#"><img src="images/demo2/10.jpg" alt="image10"/></a></div>
<div class="bb-item"><a href="#"><img src="images/demo2/11.jpg" alt="image11"/></a></div>
<div class="bb-item"><a href="#"><img src="images/demo2/12.jpg" alt="image12"/></a></div>
</div>
<nav>
<span class="bb-current"></span>
<span></span>
<span></span>
<span></span>
</nav>
</li>
<li>
<h3>Signage for the Office</h3>
<div class="bb-bookblock">
<div class="bb-item"><a href="#"><img src="images/demo2/13.jpg" alt="image13"/></a></div>
<div class="bb-item"><a href="#"><img src="images/demo2/14.jpg" alt="image14"/></a></div>
<div class="bb-item"><a href="#"><img src="images/demo2/15.jpg" alt="image15"/></a></div>
<div class="bb-item"><a href="#"><img src="images/demo2/16.jpg" alt="image16"/></a></div>
</div>
<nav>
<span class="bb-current"></span>
<span></span>
<span></span>
<span></span>
</nav>
</li>
</ul>
</section>
</div>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquerypp.custom.js"></script>
<script type="text/javascript" src="js/jquery.bookblock.js"></script>
<script type="text/javascript">
$(function() {
var Page = (function() {
var $grid = $( '#bb-custom-grid' );
return {
init : function() {
$grid.find( 'div.bb-bookblock' ).each( function( i ) {
var $bookBlock = $( this ),
$nav = $bookBlock.next().children( 'span' ),
bb = $bookBlock.bookblock( {
perspective : 900,
speed : 600,
shadows : false
} );
// add navigation events
$nav.each( function( i ) {
$( this ).on( 'click', function( event ) {
var $dot = $( this );
if( !bb.isActive() ) {
$nav.removeClass( 'bb-current' );
$dot.addClass( 'bb-current' );
}
bb.jump( i + 1 );
return false;
} );
} );
// add swipe events
$bookBlock.children().on( {
'swipeleft' : function( event ) {
bb.next();
return false;
},
'swiperight' : function( event ) {
bb.prev();
return false;
}
} );
} );
}
};
})();
Page.init();
});
</script>
</body>
</html>
JS代码(jquery.bookblock.js):
/** * jquery.bookblock.js v1.0.2 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2012,Codrops * http://www.codrops.com */
;
( function( $,window,undefined ){
'use strict';
// globalvar Modernizr = window.Modernizr;
$.BookBlock = function( options,element ){
this.$el = $( element );
this._init( options );
}
;
// the options$.BookBlock.defaults ={
// 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 shadowsshadows:true,// opacity value for the "shadow" on both sides (when the flipping page is over it).// value:0.1 - 1shadowSides:0.2,// opacity value for the "shadow" on the flipping page (while it is flipping).// value:0.1 - 1shadowFlip:0.1,// perspective valueperspective: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:'',// autoplay. If true it overwrites the circular option to true!autoplay:false,// time (ms) between page switch,if autoplay is true.interval:3000,// 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;
}
}
;
$.BookBlock.prototype ={
_init:function( options ){
// options.this.options = $.extend( true,{
}
,$.BookBlock.defaults,options );
// set the perspectivethis.$el.css( 'perspective',this.options.perspective );
// items.this.$items = this.$el.children( '.bb-item' );
// total items.this.itemsCount = this.$items.length;
// current item.this.current = 0;
// show first item.this.$current = this.$items.eq( this.current ).show();
// get width of this.$el// this will be necessary to create the flipping layout.this.elWidth = this.$el.width();
// https://github.com/twitter/bootstrap/issues/2870.var transEndEventNames ={
'WebkitTransition':'webkitTransitionEnd','MozTransition':'transitionend','OTransition':'oTransitionEnd','msTransition':'MSTransitionEnd','transition':'transitionend'}
;
this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ];
// support (3dtransforms && transitions).this.support = Modernizr.csstransitions && Modernizr.csstransforms3d;
this._initEvents();
if( this.options.autoplay ){
this.options.circular = true;
this._startSlideshow();
}
}
,_initEvents:function(){
var self = this;
if( this.options.nextEl !== '' ){
$( this.options.nextEl ).on( 'click.bookblock',function(){
self._stopSlideshow();
self._navigate( 'next' );
return false;
}
);
}
if( this.options.prevEl !== '' ){
$( this.options.prevEl ).on( 'click.bookblock',function(){
self._stopSlideshow();
self._navigate( 'prev' );
return false;
}
);
}
}
,// public method:flips nextnext:function(){
this._stopSlideshow();
this._navigate( 'next' );
}
,// public method:flips backprev:function(){
this._stopSlideshow();
this._navigate( 'prev' );
}
,// public method:goes to a specific page.jump:function( page ){
page -= 1;
if( page === this.current || page >= this.itemsCount || page < 0 ){
return false;
}
this._stopSlideshow();
this._navigate( page > this.current ? 'next':'prev',page );
}
,// public method:check if isAnimating is trueisActive:function(){
return this.isAnimating;
}
,_navigate:function( dir,page ){
if( this.isAnimating ){
return false;
}
// callback triggerthis.options.onBeforeFlip( this.current );
this.isAnimating = true;
this.$current = this.$items.eq( this.current );
if( page !== undefined ){
this.current = page;
}
else if( dir === 'next' ){
if( !this.options.circular && this.current === this.itemsCount - 1 ){
this.end = true;
}
else{
this.current = this.current < this.itemsCount - 1 ? this.current + 1:0;
}
}
else if( dir === 'prev' ){
if( !this.options.circular && this.current === 0 ){
this.end = true;
}
else{
this.current = this.current > 0 ? this.current - 1:this.itemsCount - 1;
}
}
if( !this.options.circular && this.end ){
this.$nextItem = this.$current;
}
else{
this.$nextItem = this.$items.eq( this.current );
}
if( !this.support ){
this._layoutNoSupport( dir );
}
else{
this._layout( dir );
}
}
,// with no support we consider no 3d transforms and transitions_layoutNoSupport:function( dir ){
this.$items.hide();
this.$nextItem.show();
this.end = false;
this.isAnimating = false;
var isLimit = dir === 'next' && this.current === this.itemsCount - 1 || dir === 'prev' && this.current === 0;
// callback triggerthis.options.onEndFlip( this.current,isLimit );
}
,// creates the necessary layout for the 3d animation,and triggers the transitions_layout:function( dir ){
var self = this,// basic structure:// 1 element for the left side.$s_left = this._addSide( 'left',dir ),// 1 element for the flipping/middle page$s_middle = this._addSide( 'middle',dir ),// 1 element for the right side$s_right = this._addSide( 'right',dir ),// overlays$o_left = $s_left.find( 'div.bb-overlay' ),$o_middle_f = $s_middle.find( 'div.bb-flipoverlay:first' ),$o_middle_b = $s_middle.find( 'div.bb-flipoverlay:last' ),$o_right = $s_right.find( 'div.bb-overlay' ),speed = this.options.speed;
this.$items.hide();
this.$el.prepend( $s_left,$s_middle,$s_right );
if( this.end ){
speed = 400;
}
$s_middle.css({
transition:'all ' + speed + 'ms ' + this.options.easing}
).on( this.transEndEventName,function( event ){
if( event.target.className === 'bb-page' ){
self.$el.children( 'div.bb-page' ).remove();
self.$nextItem.show();
self.end = false;
self.isAnimating = false;
var isLimit = dir === 'next' && self.current === self.itemsCount - 1 || dir === 'prev' && self.current === 0;
// callback triggerself.options.onEndFlip( self.current,isLimit );
}
}
);
if( dir === 'prev' ){
$s_middle.css({
transform:'rotateY(-180deg)'}
);
}
// overlaysif( this.options.shadows && !this.end ){
var o_left_style = ( dir === 'next' ) ?{
transition:'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms'}
:{
transition:'opacity ' + this.options.speed / 2 + 'ms ' + 'linear',opacity:this.options.shadowSides}
,o_middle_f_style = ( dir === 'next' ) ?{
transition:'opacity ' + this.options.speed / 2 + 'ms ' + 'linear'}
:{
transition:'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms',opacity:this.options.shadowFlip}
,o_middle_b_style = ( dir === 'next' ) ?{
transition:'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms',opacity:this.options.shadowFlip}
:{
transition:'opacity ' + this.options.speed / 2 + 'ms ' + 'linear'}
,o_right_style = ( dir === 'next' ) ?{
transition:'opacity ' + this.options.speed / 2 + 'ms ' + 'linear',opacity:this.options.shadowSides}
:{
transition:'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms'}
;
$o_middle_f.css( o_middle_f_style );
$o_middle_b.css( o_middle_b_style );
$o_left.css( o_left_style );
$o_right.css( o_right_style );
}
setTimeout( function(){
var style = ( dir === 'next' ) ? 'rotateY(-180deg)':'rotateY(0deg)';
if( self.end ){
// first && last pages lift up 15 deg when we can't go further.style = ( dir === 'next' ) ? 'rotateY(-15deg)':'rotateY(-165deg)';
}
$s_middle.css({
transform:style}
);
// overlaysif( self.options.shadows && !self.end ){
$o_middle_f.css({
opacity:( dir === 'next' ) ? self.options.shadowFlip:0}
);
$o_middle_b.css({
opacity:( dir === 'next' ) ? 0:self.options.shadowFlip}
);
$o_left.css({
opacity:( dir === 'next' ) ? self.options.shadowSides:0}
);
$o_right.css({
opacity:( dir === 'next' ) ? 0:self.options.shadowSides}
);
}
}
,30 );
}
,// adds the necessary sides (bb-page) to the layout_addSide:function( side,dir ){
var $side;
switch( side ){
case 'left':/*<div class="bb-page" style="z-index:2;
"><div class="bb-back"><div class="bb-outer"><div class="bb-content"><div class="bb-inner">dir==='next' ? [content of current page]:[content of next page]</div></div><div class="bb-overlay"></div></div></div></div>*/
$side = $( '<div class="bb-page"><div class="bb-back"><div class="bb-outer"><div class="bb-content" style="width:' + this.elWidth + 'px"><div class="bb-inner">' + ( dir==='next' ? this.$current.html():this.$nextItem.html() ) + '</div></div><div class="bb-overlay"></div></div></div></div>' ).css( 'z-index',102 );
break;
case 'middle':/*<div class="bb-page" style="z-index:3;
"><div class="bb-front"><div class="bb-outer"><div class="bb-content"><div class="bb-inner">dir==='next' ? [content of current page]:[content of next page]</div></div><div class="bb-flipoverlay"></div></div></div><div class="bb-back"><div class="bb-outer"><div class="bb-content"><div class="bb-inner">dir==='next' ? [content of next page]:[content of current page]</div></div><div class="bb-flipoverlay"></div></div></div></div>*/
$side = $( '<div class="bb-page"><div class="bb-front"><div class="bb-outer"><div class="bb-content" style="left:' + ( - this.elWidth / 2 ) + 'px;
width:' + this.elWidth + 'px"><div class="bb-inner">' + ( dir==='next' ? this.$current.html():this.$nextItem.html() ) + '</div></div><div class="bb-flipoverlay"></div></div></div><div class="bb-back"><div class="bb-outer"><div class="bb-content" style="width:' + this.elWidth + 'px"><div class="bb-inner">' + ( dir==='next' ? this.$nextItem.html():this.$current.html() ) + '</div></div><div class="bb-flipoverlay"></div></div></div></div>' ).css( 'z-index',103 );
break;
case 'right':/*<div class="bb-page" style="z-index:1;
"><div class="bb-front"><div class="bb-outer"><div class="bb-content"><div class="bb-inner">dir==='next' ? [content of next page]:[content of current page]</div></div><div class="bb-overlay"></div></div></div></div>*/
$side = $( '<div class="bb-page"><div class="bb-front"><div class="bb-outer"><div class="bb-content" style="left:' + ( - this.elWidth / 2 ) + 'px;
width:' + this.elWidth + 'px"><div class="bb-inner">' + ( dir==='next' ? this.$nextItem.html():this.$current.html() ) + '</div></div><div class="bb-overlay"></div></div></div></div>' ).css( 'z-index',101 );
break;
}
return $side;
}
,_startSlideshow:function(){
var self = this;
this.slideshow = setTimeout( function(){
self._navigate( 'next' );
if( self.options.autoplay ){
self._startSlideshow();
}
}
,this.options.interval );
}
,_stopSlideshow:function(){
if( this.options.autoplay ){
clearTimeout( this.slideshow );
this.options.autoplay = false;
}
}
}
;
var logError = function( message ){
if ( window.console ){
window.console.error( message );
}
}
;
$.fn.bookblock = function( options ){
var instance = $.data( this,'bookblock' );
if ( typeof options === 'string' ){
var args = Array.prototype.slice.call( arguments,1 );
this.each(function(){
if ( !instance ){
logError( "cannot call methods on bookblock prior to initialization;
" +"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ){
logError( "no such method '" + options + "' for bookblock instance" );
return;
}
instance[ options ].apply( instance,args );
}
);
}
else{
this.each(function(){
if ( instance ){
instance._init();
}
else{
instance = $.data( this,'bookblock',new $.BookBlock( options,this ) );
}
}
);
}
return instance;
}
;
}
)( jQuery,window );
JS代码(jquerypp.custom.js):
(function(){
var event = jQuery.event,//helper that finds handlers by type and calls back a function,this is basically handle// events - the events object// types - an array of event types to look for// callback(type,handlerFunc,selector) - a callback// selector - an optional selector to filter with,if there,matches by selector// if null,matches anything,otherwise,matches with no selectorfindHelper = function( events,types,callback,selector ){
var t,type,typeHandlers,all,h,handle,namespaces,namespace,match;
for ( t = 0;
t < types.length;
t++ ){
type = types[t];
all = type.indexOf(".") < 0;
if (!all ){
namespaces = type.split(".");
type = namespaces.shift();
namespace = new RegExp("(^|\\.)" + namespaces.slice(0).sort().join("\\.(?:.*\\.)?") + "(\\.|$)");
}
typeHandlers = (events[type] || []).slice(0);
for ( h = 0;
h < typeHandlers.length;
h++ ){
handle = typeHandlers[h];
match = (all || namespace.test(handle.namespace));
if(match){
if(selector){
if (handle.selector === selector ){
callback(type,handle.origHandler || handle.handler);
}
}
else if (selector === null){
callback(type,handle.origHandler || handle.handler,handle.selector);
}
else if (!handle.selector ){
callback(type,handle.origHandler || handle.handler);
}
}
}
}
}
;
/** * Finds event handlers of a given type on an element. * @param{
HTMLElement}
el * @param{
Array}
types an array of event names * @param{
String}
[selector] optional selector * @return{
Array}
an array of event handlers */
event.find = function( el,types,selector ){
var events = ( $._data(el) ||{
}
).events,handlers = [],t,liver,live;
if (!events ){
return handlers;
}
findHelper(events,types,function( type,handler ){
handlers.push(handler);
}
,selector);
return handlers;
}
;
/** * Finds all events. Group by selector. * @param{
HTMLElement}
el the element * @param{
Array}
types event types */
event.findBySelector = function( el,types ){
var events = $._data(el).events,selectors ={
}
,//adds a handler for a given selector and eventadd = function( selector,event,handler ){
var select = selectors[selector] || (selectors[selector] ={
}
),events = select[event] || (select[event] = []);
events.push(handler);
}
;
if (!events ){
return selectors;
}
//first check live:/*$.each(events.live || [],function( i,live ){
if ( $.inArray(live.origType,types) !== -1 ){
add(live.selector,live.origType,live.origHandler || live.handler);
}
}
);
*/
//then check straight bindsfindHelper(events,types,function( type,handler,selector ){
add(selector || "",type,handler);
}
,null);
return selectors;
}
;
event.supportTouch = "ontouchend" in document;
$.fn.respondsTo = function( events ){
if (!this.length ){
return false;
}
else{
//add default ?return event.find(this[0],$.isArray(events) ? events:[events]).length > 0;
}
}
;
$.fn.triggerHandled = function( event,data ){
event = (typeof event == "string" ? $.Event(event):event);
this.trigger(event,data);
return event.handled;
}
;
/** * Only attaches one event handler for all types ... * @param{
Array}
types llist of types that will delegate here * @param{
Object}
startingEvent the first event to start listening to * @param{
Object}
onFirst a function to call */
event.setupHelper = function( types,startingEvent,onFirst ){
if (!onFirst ){
onFirst = startingEvent;
startingEvent = null;
}
var add = function( handleObj ){
var bySelector,selector = handleObj.selector || "";
if ( selector ){
bySelector = event.find(this,types,selector);
if (!bySelector.length ){
$(this).delegate(selector,startingEvent,onFirst);
}
}
else{
//var bySelector = event.find(this,types,selector);
if (!event.find(this,types,selector).length ){
event.add(this,startingEvent,onFirst,{
selector:selector,delegate:this}
);
}
}
}
,remove = function( handleObj ){
var bySelector,selector = handleObj.selector || "";
if ( selector ){
bySelector = event.find(this,types,selector);
if (!bySelector.length ){
$(this).undelegate(selector,startingEvent,onFirst);
}
}
else{
if (!event.find(this,types,selector).length ){
event.remove(this,startingEvent,onFirst,{
selector:selector,delegate:this}
);
}
}
}
;
$.each(types,function(){
event.special[this] ={
add:add,remove:remove,setup:function(){
}
,teardown:function(){
}
}
;
}
);
}
;
}
)(jQuery);
(function($){
var isPhantom = /Phantom/.test(navigator.userAgent),supportTouch = !isPhantom && "ontouchend" in document,scrollEvent = "touchmove scroll",// Use touch events or map it to mouse eventstouchStartEvent = supportTouch ? "touchstart":"mousedown",touchStopEvent = supportTouch ? "touchend":"mouseup",touchMoveEvent = supportTouch ? "touchmove":"mousemove",data = function(event){
var d = event.originalEvent.touches ?event.originalEvent.touches[ 0 ]:event;
return{
time:(new Date).getTime(),coords:[ d.pageX,d.pageY ],origin:$( event.target )}
;
}
;
/** * @add jQuery.event.swipe */
var swipe = $.event.swipe ={
/** * @attribute delay * Delay is the upper limit of time the swipe motion can take in milliseconds. This defaults to 500. * * A user must perform the swipe motion in this much time. */
delay:500,/** * @attribute max * The maximum distance the pointer must travel in pixels. The default is 75 pixels. */
max:75,/** * @attribute min * The minimum distance the pointer must travel in pixels. The default is 30 pixels. */
min:30}
;
$.event.setupHelper( [/** * @hide * @attribute swipe */
"swipe",/** * @hide * @attribute swipeleft */
'swipeleft',/** * @hide * @attribute swiperight */
'swiperight',/** * @hide * @attribute swipeup */
'swipeup',/** * @hide * @attribute swipedown */
'swipedown'],touchStartEvent,function(ev){
var// update with data when the event was startedstart = data(ev),stop,delegate = ev.delegateTarget || ev.currentTarget,selector = ev.handleObj.selector,entered = this;
function moveHandler(event){
if ( !start ){
return;
}
// update stop with the data from the current eventstop = data(event);
// prevent scrollingif ( Math.abs( start.coords[0] - stop.coords[0] ) > 10 ){
event.preventDefault();
}
}
;
// Attach to the touch move events$(document.documentElement).bind(touchMoveEvent,moveHandler).one(touchStopEvent,function(event){
$(this).unbind( touchMoveEvent,moveHandler);
// if start and stop contain data figure out if we have a swipe eventif ( start && stop ){
// calculate the distance between start and stop datavar deltaX = Math.abs(start.coords[0] - stop.coords[0]),deltaY = Math.abs(start.coords[1] - stop.coords[1]),distance = Math.sqrt(deltaX*deltaX+deltaY*deltaY);
// check if the delay and distance are matchedif ( stop.time - start.time < swipe.delay && distance >= swipe.min ){
var events = ['swipe'];
// check if we moved horizontallyif( deltaX >= swipe.min && deltaY < swipe.min){
// based on the x coordinate check if we moved left or rightevents.push( start.coords[0] > stop.coords[0] ? "swipeleft":"swiperight" );
}
else// check if we moved verticallyif(deltaY >= swipe.min && deltaX < swipe.min){
// based on the y coordinate check if we moved up or downevents.push( start.coords[1] < stop.coords[1] ? "swipedown":"swipeup" );
}
// trigger swipe events on this guy$.each($.event.find(delegate,events,selector),function(){
this.call(entered,ev,{
start:start,end:stop}
)}
)}
}
// reset start and stopstart = stop = undefined;
}
)}
);
}
)(jQuery)CSS代码(custom.css):
.bb-custom-wrapper{background:#fff;width:400px;height:340px;position:relative;margin:40px auto;box-shadow:0px 1px 2px rgba(0,0,0,0.1);border-radius:0 0 5px 5px;}
.bb-custom-wrapper:before,.bb-custom-wrapper:after{content:'';width:100%;height:100%;position:absolute;background:#fff;left:0;box-shadow:0px 1px 2px rgba(0,0,0,0.1);border-radius:0 0 5px 5px;}
.bb-custom-wrapper:before{top:6px;z-index:-2;box-shadow:0px 7px 10px rgba(0,0,0,0.3);}
.bb-custom-wrapper:after{top:3px;z-index:-1;}
.bb-bookblock{box-shadow:0px 5px 0 rgba(0,0,0,0.1);}
.bb-custom-wrapper h3{color:#aaa;font-size:12px;line-height:16px;position:absolute;left:10px;bottom:-3px;}
.bb-custom-wrapper nav{width:120px;margin:8px 10px 0 0;float:right;position:relative;z-index:0;}
.bb-custom-wrapper nav a{float:left;width:30px;height:30px;background:url(../images/nav_small.png) center right;text-indent:-90000px;opacity:0.8;}
.bb-custom-wrapper nav a:hover{opacity:1;}
.bb-custom-wrapper nav a#bb-nav-prev{background-position:center left;margin-right:5px;}
.bb-custom-wrapper nav a#bb-nav-next{background-position:-43px 50%;}
.bb-custom-wrapper nav a#bb-nav-jump{background-position:center right;float:right;}
CSS代码(custom2.css):
.bb-bookblock{width:300px;height:225px;}
ul.bb-custom-grid{list-style:none;margin:40px auto 30px auto;padding:0;width:700px;}
/* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
ul.bb-custom-grid:before,ul.bb-custom-grid:after{content:" ";display:table;}
ul.bb-custom-grid:after{clear:both;}
/* end clearfix hack */
ul.bb-custom-grid li{float:left;width:300px;height:260px;padding:10px 20px 50px 20px;background:#f8f8f8 url(../images/demo2/noise.jpg);position:relative;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;margin-bottom:20px;box-shadow:0 1px 2px rgba(0,0,0,0.2);}
ul.bb-custom-grid li:nth-child(odd){margin-right:20px;}
ul.bb-custom-grid li:before,ul.bb-custom-grid li:after{content:'';position:absolute;z-index:-2;bottom:15px;left:10px;width:50%;height:20%;box-shadow:0 15px 10px rgba(0,0,0,0.7);-webkit-transform:rotate(-3deg);-moz-transform:rotate(-3deg);-ms-transform:rotate(-3deg);-o-transform:rotate(-3deg);transform:rotate(-3deg);}
ul.bb-custom-grid li:after{right:10px;left:auto;-webkit-transform:rotate(3deg);-moz-transform:rotate(3deg);-ms-transform:rotate(3deg);-o-transform:rotate(3deg);transform:rotate(3deg);}
ul.bb-custom-grid li a{display:block;}
ul.bb-custom-grid li h3{color:#9a9b92;margin:0;padding:0;text-transform:uppercase;font-family:"Montserrat",sans-serif;font-weight:400;font-size:14px;line-height:35px;border-top:1px dashed rgba(0,0,0,0.1);text-shadow:0 1px 1px rgba(255,255,255,0.9);}
ul.bb-custom-grid nav{text-align:center;margin-top:12px;padding-bottom:5px;border-bottom:1px dashed rgba(0,0,0,0.1);}
ul.bb-custom-grid nav span{display:inline-block;width:12px;height:12px;border-radius:50%;background:#f0f0f0;margin:3px;cursor:pointer;box-shadow:inset 0 1px 1px rgba(0,0,0,0.2),0 2px 1px rgba(255,255,255,0.9);}
ul.bb-custom-grid nav span.bb-current{background:#bdd70d;}
CSS代码(noJS.css):
/* No JavaScript Style for demos */
.bb-bookblock,ul.bb-custom-grid li{width:auto;height:auto;}
.bb-item{display:block;position:relative;}
.bb-custom-wrapper{height:auto;}
.bb-custom-content{height:470px;}
.bb-bookblock .folder-inner{left:320px;}
.bb-bookblock .folder-fold,.bb-bookblock .folder-cover span,#folder-close{display:none;}
分享到QQ
分享到微博
微信扫一扫
