以下是 jquery网格图片拖动js代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>jquery网格图片拖动</title>
<meta http-equiv="Content-Type" content="text/html; 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">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<noscript>
<style>
.ib-main a{
cursor:pointer;
}
.ib-main-wrapper{
position:absolute;
top:0px;
bottom:24px;
overflow:scroll;
}
</style>
</noscript>
<!--<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />-->
<script id="previewTmpl" type="text/x-jquery-tmpl">
<div id="ib-img-preview" class="ib-preview">
<img src="${src}" alt="" class="ib-preview-img"/>
<span class="ib-preview-descr" style="display:none;">${description}</span>
<div class="ib-nav" style="display:none;">
<span class="ib-nav-prev">Previous</span>
<span class="ib-nav-next">Next</span>
</div>
<span class="ib-close" style="display:none;">Close Preview</span>
<div class="ib-loading-large" style="display:none;">Loading...</div>
</div>
</script>
<script id="contentTmpl" type="text/x-jquery-tmpl">
<div id="ib-content-preview" class="ib-content-preview">
<div class="ib-teaser" style="display:none;">{{html teaser}}</div>
<div class="ib-content-full" style="display:none;">{{html content}}</div>
<span class="ib-close" style="display:none;">Close Preview</span>
</div>
</script>
</head>
<body>
<div class="container">
<div id="ib-main-wrapper" class="ib-main-wrapper">
<div class="ib-main">
<a href="#"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed
Age and Youth</span></a>
<a href="#"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot
live together</span></a>
<a href="#" class="ib-content">
<div class="ib-teaser">
<h2>Welcome <span>Howdy, Stranger</span></h2>
</div>
<div class="ib-content-full">
<p>Far far away, behind the word mountains, far from
the countries Vokalia and Consonantia, there live
the blind texts. Separated they live in
Bookmarksgrove right at the coast of the Semantics,
a large language ocean.</p>
<p>A small river named Duden flows by their place
and supplies it with the necessary regelialia. It is
a paradisematic country, in which roasted parts of
sentences fly into your mouth.</p>
<p>Even the all-powerful Pointing has no control
about the blind texts it is an almost unorthographic
life One day however a small line of blind text by
the name of Lorem Ipsum decided to leave for the far
World of Grammar.</p>
</div>
</a>
<a href="#"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth
is full of pleasance</span></a>
<a href="#"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed
Age and Youth</span></a>
<a href="#"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot
live together</span></a>
<a href="#"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth
is full of pleasance</span></a>
<a href="#"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed
Age and Youth</span></a>
<a href="#"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot
live together</span></a>
<a href="#"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth
is full of pleasance</span></a>
<a href="#"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed
Age and Youth</span></a>
<a href="#"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot
live together</span></a>
<a href="#" class="ib-content">
<div class="ib-teaser">
<h2>Welcome <span>Howdy, Stranger</span></h2>
</div>
<div class="ib-content-full">
<p>Far far away, behind the word mountains, far from
the countries Vokalia and Consonantia, there live
the blind texts. Separated they live in
Bookmarksgrove right at the coast of the Semantics,
a large language ocean.</p>
<p>A small river named Duden flows by their place
and supplies it with the necessary regelialia. It is
a paradisematic country, in which roasted parts of
sentences fly into your mouth.</p>
<p>Even the all-powerful Pointing has no control
about the blind texts it is an almost unorthographic
life One day however a small line of blind text by
the name of Lorem Ipsum decided to leave for the far
World of Grammar.</p>
</div>
</a>
<a href="#"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth
is full of pleasance</span></a>
<a href="#"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed
Age and Youth</span></a>
<a href="#"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot
live together</span></a>
<a href="#"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth
is full of pleasance</span></a>
<a href="#"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed
Age and Youth</span></a>
<a href="#"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot
live together</span></a>
<a href="#"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth
is full of pleasance</span></a>
<a href="#"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed
Age and Youth</span></a>
<a href="#"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot
live together</span></a>
<a href="#"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth
is full of pleasance</span></a>
<a href="#"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed
Age and Youth</span></a>
<a href="#"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot
live together</span></a>
<a href="#"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth
is full of pleasance</span></a>
<a href="#"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed
Age and Youth</span></a>
<a href="#"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot
live together</span></a>
<a href="#"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth
is full of pleasance</span></a>
<a href="#"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed
Age and Youth</span></a>
<a href="#"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot
live together</span></a>
<a href="#"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth
is full of pleasance</span></a>
<a href="#"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed
Age and Youth</span></a>
<a href="#"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot
live together</span></a>
<a href="#"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth
is full of pleasance</span></a>
<a href="#"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed
Age and Youth</span></a>
<a href="#"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot
live together</span></a>
<a href="#"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth
is full of pleasance</span></a>
<a href="#"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed
Age and Youth</span></a>
<a href="#"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot
live together</span></a>
<a href="#"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth
is full of pleasance</span></a>
<a href="#"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed
Age and Youth</span></a>
<a href="#"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot
live together</span></a>
<a href="#"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth
is full of pleasance</span></a>
<a href="#"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed
Age and Youth</span></a>
<a href="#"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot
live together</span></a>
<a href="#"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth
is full of pleasance</span></a>
<a href="#"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed
Age and Youth</span></a>
<a href="#"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot
live together</span></a>
<a href="#"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth
is full of pleasance</span></a>
<a href="#"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed
Age and Youth</span></a>
<a href="#"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot
live together</span></a>
<a href="#"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth
is full of pleasance</span></a>
<a href="#"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot
live together</span></a>
<a href="#"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth
is full of pleasance</span></a>
<a href="#"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed
Age and Youth</span></a>
<a href="#"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot
live together</span></a>
<a href="#"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth
is full of pleasance</span></a>
<a href="#"><img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>Crabbed
Age and Youth</span></a>
<a href="#"><img src="images/thumbs/2.jpg" data-largesrc="images/large/2.jpg" alt="image02"/><span>Cannot
live together</span></a>
<a href="#"><img src="images/thumbs/3.jpg" data-largesrc="images/large/3.jpg" alt="image03"/><span>Youth
is full of pleasance</span></a>
<div class="clr"></div>
</div><!-- ib-main -->
</div><!-- ib-main-wrapper -->
</div>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="js/jquery.kinetic.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
var $ibWrapper = $('#ib-main-wrapper'),
Template = (function() {
// true if dragging the container
var kinetic_moving = false,
// current index of the opened item
current = -1,
// true if the item is being opened / closed
isAnimating = false,
// items on the grid
$ibItems = $ibWrapper.find('div.ib-main > a'),
// image items on the grid
$ibImgItems = $ibItems.not('.ib-content'),
// total image items on the grid
imgItemsCount = $ibImgItems.length,
init = function() {
// add a class ib-image to the image items
$ibImgItems.addClass('ib-image');
// apply the kinetic plugin to the wrapper
loadKinetic();
// load some events
initEvents();
},
loadKinetic = function() {
setWrapperSize();
$ibWrapper.kinetic({
moved : function() {
kinetic_moving = true;
},
stopped : function() {
kinetic_moving = false;
}
});
},
setWrapperSize = function() {
var containerMargins = $('#ib-top').outerHeight(true) + $('#header').outerHeight(true) + parseFloat( $ibItems.css('margin-top') );
$ibWrapper.css( 'height', $(window).height() - containerMargins )
},
initEvents = function() {
// open the item only if not dragging the container
$ibItems.bind('click.ibTemplate', function( event ) {
if( !kinetic_moving )
openItem( $(this) );
return false;
});
// on window resize, set the wrapper and preview size accordingly
$(window).bind('resize.ibTemplate', function( event ) {
setWrapperSize();
$('#ib-img-preview, #ib-content-preview').css({
width : $(window).width(),
height : $(window).height()
})
});
},
openItem = function( $item ) {
if( isAnimating ) return false;
// if content item
if( $item.hasClass('ib-content') ) {
isAnimating = true;
current = $item.index('.ib-content');
loadContentItem( $item, function() { isAnimating = false; } );
}
// if image item
else {
isAnimating = true;
current = $item.index('.ib-image');
loadImgPreview( $item, function() { isAnimating = false; } );
}
},
// opens one image item (fullscreen)
loadImgPreview = function( $item, callback ) {
var largeSrc = $item.children('img').data('largesrc'),
description = $item.children('span').text(),
largeImageData = {
src : largeSrc,
description : description
};
// preload large image
$item.addClass('ib-loading');
preloadImage( largeSrc, function() {
$item.removeClass('ib-loading');
var hasImgPreview = ( $('#ib-img-preview').length > 0 );
if( !hasImgPreview )
$('#previewTmpl').tmpl( largeImageData ).insertAfter( $ibWrapper );
else
$('#ib-img-preview').children('img.ib-preview-img')
.attr( 'src', largeSrc )
.end()
.find('span.ib-preview-descr')
.text( description );
//get dimentions for the image, based on the windows size
var dim = getImageDim( largeSrc );
$item.removeClass('ib-img-loading');
//set the returned values and show/animate preview
$('#ib-img-preview').css({
width : $item.width(),
height : $item.height(),
left : $item.offset().left,
top : $item.offset().top
}).children('img.ib-preview-img').hide().css({
width : dim.width,
height : dim.height,
left : dim.left,
top : dim.top
}).fadeIn( 400 ).end().show().animate({
width : $(window).width(),
left : 0
}, 500, 'easeOutExpo', function() {
$(this).animate({
height : $(window).height(),
top : 0
}, 400, function() {
var $this = $(this);
$this.find('span.ib-preview-descr, span.ib-close').show()
if( imgItemsCount > 1 )
$this.find('div.ib-nav').show();
if( callback ) callback.call();
});
});
if( !hasImgPreview )
initImgPreviewEvents();
} );
},
// opens one content item (fullscreen)
loadContentItem = function( $item, callback ) {
var hasContentPreview = ( $('#ib-content-preview').length > 0 ),
teaser = $item.children('div.ib-teaser').html(),
content = $item.children('div.ib-content-full').html(),
contentData = {
teaser : teaser,
content : content
};
if( !hasContentPreview )
$('#contentTmpl').tmpl( contentData ).insertAfter( $ibWrapper );
//set the returned values and show/animate preview
$('#ib-content-preview').css({
width : $item.width(),
height : $item.height(),
left : $item.offset().left,
top : $item.offset().top
}).show().animate({
width : $(window).width(),
left : 0
}, 500, 'easeOutExpo', function() {
$(this).animate({
height : $(window).height(),
top : 0
}, 400, function() {
var $this = $(this),
$teaser = $this.find('div.ib-teaser'),
$content= $this.find('div.ib-content-full'),
$close = $this.find('span.ib-close');
if( hasContentPreview ) {
$teaser.html( teaser )
$content.html( content )
}
$teaser.show();
$content.show();
$close.show();
if( callback ) callback.call();
});
});
if( !hasContentPreview )
initContentPreviewEvents();
},
// preloads an image
preloadImage = function( src, callback ) {
$('<img/>').load(function(){
if( callback ) callback.call();
}).attr( 'src', src );
},
// load the events for the image preview : navigation ,close button, and window resize
initImgPreviewEvents = function() {
var $preview = $('#ib-img-preview');
$preview.find('span.ib-nav-prev').bind('click.ibTemplate', function( event ) {
navigate( 'prev' );
}).end().find('span.ib-nav-next').bind('click.ibTemplate', function( event ) {
navigate( 'next' );
}).end().find('span.ib-close').bind('click.ibTemplate', function( event ) {
closeImgPreview();
});
//resizing the window resizes the preview image
$(window).bind('resize.ibTemplate', function( event ) {
var $largeImg = $preview.children('img.ib-preview-img'),
dim = getImageDim( $largeImg.attr('src') );
$largeImg.css({
width : dim.width,
height : dim.height,
left : dim.left,
top : dim.top
})
});
},
// load the events for the content preview : close button
initContentPreviewEvents = function() {
$('#ib-content-preview').find('span.ib-close').bind('click.ibTemplate', function( event ) {
closeContentPreview();
});
},
// navigate the image items in fullscreen mode
navigate = function( dir ) {
if( isAnimating ) return false;
isAnimating = true;
var $preview = $('#ib-img-preview'),
$loading = $preview.find('div.ib-loading-large');
$loading.show();
if( dir === 'next' ) {
( current === imgItemsCount - 1 ) ? current = 0 : ++current;
}
else if( dir === 'prev' ) {
( current === 0 ) ? current = imgItemsCount - 1 : --current;
}
var $item = $ibImgItems.eq( current ),
largeSrc = $item.children('img').data('largesrc'),
description = $item.children('span').text();
preloadImage( largeSrc, function() {
$loading.hide();
//get dimentions for the image, based on the windows size
var dim = getImageDim( largeSrc );
$preview.children('img.ib-preview-img')
.attr( 'src', largeSrc )
.css({
width : dim.width,
height : dim.height,
left : dim.left,
top : dim.top
})
.end()
.find('span.ib-preview-descr')
.text( description );
$ibWrapper.scrollTop( $item.offset().top )
.scrollLeft( $item.offset().left );
isAnimating = false;
});
},
// closes the fullscreen image item
closeImgPreview = function() {
if( isAnimating ) return false;
isAnimating = true;
var $item = $ibImgItems.eq( current );
$('#ib-img-preview').find('span.ib-preview-descr, div.ib-nav, span.ib-close')
.hide()
.end()
.animate({
height : $item.height(),
top : $item.offset().top
}, 500, 'easeOutExpo', function() {
$(this).animate({
width : $item.width(),
left : $item.offset().left
}, 400, function() {
$(this).fadeOut(function() {isAnimating = false;});
} );
});
},
// closes the fullscreen content item
closeContentPreview = function() {
if( isAnimating ) return false;
isAnimating = true;
var $item = $ibItems.not('.ib-image').eq( current );
$('#ib-content-preview').find('div.ib-teaser, div.ib-content-full, span.ib-close')
.hide()
.end()
.animate({
height : $item.height(),
top : $item.offset().top
}, 500, 'easeOutExpo', function() {
$(this).animate({
width : $item.width(),
left : $item.offset().left
}, 400, function() {
$(this).fadeOut(function() {isAnimating = false;});
} );
});
},
// get the size of one image to make it full size and centered
getImageDim = function( src ) {
var img = new Image();
img.src = src;
var w_w = $(window).width(),
w_h = $(window).height(),
r_w = w_h / w_w,
i_w = img.width,
i_h = img.height,
r_i = i_h / i_w,
new_w, new_h,
new_left, new_top;
if( r_w > r_i ) {
new_h = w_h;
new_w = w_h / r_i;
}
else {
new_h = w_w * r_i;
new_w = w_w;
}
return {
width : new_w,
height : new_h,
left : (w_w - new_w) / 2,
top : (w_h - new_h) / 2
};
};
return { init : init };
})();
Template.init();
});
</script>
</body>
</html>
CSS代码(reset.css):
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,figure,figcaption{margin:0;padding:0;}
html,body{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
CSS代码(style.css):
@import url('reset.css');body{background:#fff;color:#fff;font-family:'Oswald',sans-serif;font-size:13px;text-transform:uppercase;overflow:hidden;}
a{color:#ddd;text-decoration:none;}
.clr{clear:both;}
/* Header Style */
.header{font-family:'Arial Narrow',Arial,sans-serif;position:fixed;bottom:0px;left:0px;width:100%;height:25px;line-height:24px;font-size:11px;background:#000;opacity:0.9;z-index:20;}
.header a{padding:5px 10px;letter-spacing:1px;color:#fff;text-align:right;}
.header a:hover{color:#ddd;}
.header a span{font-weight:bold;}
.header span.right_ab{position:absolute;right:4px;}
/* Top Bar */
.ib-top{background:#fff;position:fixed;top:0px;left:0px;width:100%;z-index:10;height:40px;}
.ib-top h1{color:#333;font-size:20px;line-height:40px;padding:0 10px;}
.ib-top h1 span{color:#555;font-size:12px;}
.ib-main-wrapper{width:100%;overflow:hidden;margin-top:40px;outline:none;/*height dynamic*/
}
.ib-main{position:relative;width:2546px;}
.ib-main a{float:left;width:210px;height:210px;position:relative;overflow:hidden;margin:0px 0px 2px 2px;cursor:move;background:#fff url(../images/thumb_bg.jpg) no-repeat center center;background-size:110% 110%;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
.ib-main a.ib-loading,.ib-main a.ib-loading:hover{background:#fff url(../images/ajax-loader.gif) no-repeat center center;background-size:31px 31px;}
.ib-main a.ib-loading img,.ib-main a.ib-loading:hover img{opacity:0.5;}
.ib-main > a.ib-loading > span,.ib-main a.ib-loading > span{display:none;}
.ib-main a img{opacity:0.95;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
.ib-main > a > span{display:block;position:absolute;width:100%;height:20px;line-height:22px;text-align:center;font-size:11px;bottom:-20px;left:0px;text-shadow:1px 1px 1px rgba(0,0,0,0.4);-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
.ib-main a:hover > span{bottom:0px;}
.ib-main a:hover img{opacity:0.8;}
.ib-main a:hover{background-size:100% 100%;}
.ib-content{background:#f9f9f9;}
.ib-content .ib-teaser{text-align:center;background:#333;width:100%;height:100%;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
.ib-teaser h2{color:#fff;font-size:26px;line-height:26px;padding-top:40%;text-shadow:1px 0px 2px rgba(0,0,0,0.2);}
.ib-teaser h2 span{text-transform:none;font-size:16px;font-family:Georgia,serif;font-style:italic;display:block;}
.ib-content .ib-teaser:hover{background:#000;}
.ib-content-preview{position:absolute;top:44px;left:0px;background:#000;width:100%;height:630px;/*dynamic*/
display:none;}
.ib-content-preview .ib-teaser h2{font-size:50px;padding:85px 40px 20px 40px;}
.ib-content-preview .ib-teaser span{padding:20px 0px 0px 5px;font-size:22px;}
.ib-content-full{font-family:'Oswald';text-transform:none;line-height:26px;margin:0px 40px;border-top:1px solid #333;padding:20px 0px;font-size:16px;}
.ib-content-full p{padding:5px 0px;}
.ib-preview{overflow:hidden;position:absolute;top:40px;display:none;}
.ib-preview-descr{position:absolute;bottom:30px;left:10px;z-index:999;font-size:50px;text-shadow:1px 0px 2px rgba(0,0,0,0.2);}
.ib-preview img{position:absolute;}
.ib-nav span{width:53px;height:87px;position:absolute;top:50%;margin-top:-43px;cursor:pointer;text-indent:-9000px;opacity:0.6;z-index:999;background:transparent url(../images/nav.png) no-repeat top right;right:10px;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;}
.ib-nav span.ib-nav-prev{background-position:top left;left:10px;right:auto;}
.ib-close{top:7px;right:7px;background:transparent url(../images/close.png) no-repeat center center;position:absolute;width:24px;height:24px;cursor:pointer;opacity:0.2;z-index:999;text-indent:-9000px;}
.ib-nav span:hover,.ib-close:hover{opacity:1;}
.ib-loading-large{text-indent:-9000px;width:60px;height:60px;background:#fff url(../images/ajax-loader.gif) no-repeat center center;position:absolute;top:50%;left:50%;margin:-30px 0 0 -30px;z-index:999;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px 10px 10px 10px;opacity:0.9;}
分享到QQ
分享到微博
微信扫一扫
