很棒的jQuery CSS3组合画廊与动画

我们将创建一个动画组合与jQuery画廊。
缩略图画廊将包含一个照片卷轴和一个内容区域,我们将显示详细的投资组合项目。图像可以通过点击放大它,让它看上去就像一个覆盖。

这个想法是为了动画元素只要点击缩略图的内容。我们将动画标题从顶部,淡出前面的图片和幻灯片的描述。

标记

首先,我们将创建内容区域的结构。为此,我们将创建一个“pg_content”主要div元素类。里我们将类和id的主标题“pg_title”,预览容器id“pg_preview”和“pg_description”描述的元素类。描述div也将有一个单独的类,例如“pg_desc1′和“pg_desc2′:
<div class="pg_content">
 <div id="pg_title" class="pg_title">
  <h1 style="display:block;top:25px;">
   Shape Company Website Design
  </h1>
  <h1>Summer of Love</h1>
  ...
 </div>
 <div id="pg_preview">
  <img class="pg_thumb" style="display:block;z-index:9999;" src="images/medium/1.jpg" alt="images/large/1.jpg"/>
  <img class="pg_thumb" src="images/medium/2.jpg" alt="images/large/2.jpg"/>
  ...
 </div>
 <div id="pg_desc1" class="pg_description">
  <div style="display:block;left:250px;">
   <h2>Project Description</h2>
   <p>A description comes here</p>
  </div>
  <div>
   <h2>Project Description</h2>
   <p>A description comes here</p>
  </div>
  ...
 </div>
 <div id="pg_desc2" class="pg_description">
  <div style="display:block;left:250px;">
   <h2>Technologies Used</h2>
   <p>A text comes here</p>
  </div>
  <div>
   <h2>Technologies Used</h2>
   <p>A text comes here</p>
  </div>
  ...
 </div>
</div>

所有里面的第一个元素的容器将有一个特定的内联样式,使其可见当我们加载页面。其余的元素样式中定义CSS,即他们的立场时,他们是隐藏的。

缩略图照片卷轴将有以下结构(基于诺斯Malihu缩略图照片卷轴):
<div id="thumbContainter">
 <div id="thumbScroller">
  <div class="container">
   <div class="content">
    <div>
     <a href="#">
      <img src="images/thumbs/1.jpg" alt="" class="thumb" />
     </a>
    </div>
   </div>
   <div class="content">
    ...
   </div>
   ...
  </div>
 </div>
</div>

最后,我们将添加一个div半透明叠加:
<div id="overlay"></div>
让我们看一看风格。

CSS

我们开始通过重置利润率和填充、和一般的身体风格:
*{
 margin:0;
 padding:0;
}
body{
 background: #564c4c url(../webtreats2.jpg) repeat top left;
 font-family:"Trebuchet MS","Myriad Pro", Helvetica, sans-serif;
 font-size:12px;
 color: #111;
 overflow-x:hidden;
}

这和更美丽的背景图像可以在http://webtreats.mysitemyway.com上找到。
包裹将有以下方式:
#overlay{
 position:fixed;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 background: #000;
 display:none;
 opacity:0.9;
}

如果你想要这工作在IE中,请添加过滤器不透明属性。
缩略图的风格滑块将以下:
#thumbContainter{
 position:fixed;
 top:0px;
 left:0px;
 bottom:0px;
 margin:0;
 width:175px;
 padding:0 10px;
 background:transparent url(../bg.png) repeat top left;
 border-right:1px solid #f0f0f0;
 -moz-box-shadow:-2px 0px 10px #000 inset;
 -webkit-box-shadow:-2px 0px 10px #000 inset;
 box-shadow:-2px 0px 10px #000 inset;
}
#thumbScroller{
 position:relative;
 height:600px;
 overflow:hidden;
 left:-180px;
}
#thumbScroller .container{
 position:relative;
 top:0;
 float:left;
}
#thumbScroller .content{
 clear:both;
 float:left;
}
#thumbScroller .content div{
 padding:2px;
 height:100%;
 float:left;
}
#thumbScroller .content a{
 outline:none;
}
#thumbScroller img{
 border:5px solid #000;
 -moz-box-shadow:0px 0px 2px #000;
 -webkit-box-shadow:0px 0px 2px #000;
 box-shadow:0px 0px 2px #000;
}

在内容区域的所有元素将被放置绝对:
img.pg_thumb,
img#pg_large,
.pg_title h1,
.pg_content .pg_description div
{
 position:absolute;
}

最初描述div将不显示:
.pg_content .pg_description div{
 display:none;
}
主标题将黑色图案的背景图像,就像主缩略图容器。这个职位将被设置为元素的值是不可见的,因此我们将有一个-50 px的:

.pg_title h1{
 display:none;
 left:250px;
 top:-50px;/*25*/
 background:transparent url(../bg.png) repeat top left;
 padding:10px 20px;
 color:#fff;
 font-weight:bold;
}

我们将动画25像素使标题清晰可见。

拇指需要隐藏:
img.pg_thumb{
 display:none;
}

大的预览图像将当我们点击创建组合项内容区。它将有最高的z - index:
img#pg_large{
 z-index:9999;
}

缩略图的风格在内容区域和大的风格预览将如下:
img.pg_thumb,
img#pg_large{
 top:90px;
 left:250px;
 padding:10px;
 background:transparent url(../bg.png) repeat top left;
 cursor:pointer;
}

描述和标题要有以下方式:
.pg_description h2{
 color:#000;
 font-size:22px;
 margin-bottom:10px;
 background:transparent url(../bg2.png) repeat top left;
 padding:5px;
}
.pg_description p{
 font-size:14px;
 width:500px;
 padding:10px;
 overflow:hidden;
 text-shadow:0px 0px 1px #fff;
 background:transparent url(../bg.png) repeat top left;
 color:#fff;
}

最后,我们需要定义描述div的位置:
#pg_desc1 div{
 top:420px;
 left:205px;
}
#pg_desc2 div{
 top:560px;
 left:295px;
}

这是风格。让我们看看接下来的JavaScript。

JavaScript

主要的思想是创建可滚动缩略图容器,并提供内容元素的转换。同时,我们需要定义发生了什么当我们点击媒介形象的内容区域查看大图预览。
首先,让我们定义一些变量:
//index of current item
var current    = 0;
//speeds / ease type for animations
var fadeSpeed   = 400;
var animSpeed   = 600;
var easeType   = 'easeOutCirc';
//caching
var $thumbScroller  = $('#thumbScroller');
var $scrollerContainer = $thumbScroller.find('.container');
var $scrollerContent = $thumbScroller.find('.content');
var $pg_title    = $('#pg_title');
var $pg_preview   = $('#pg_preview');
var $pg_desc1    = $('#pg_desc1');
var $pg_desc2    = $('#pg_desc2');
var $overlay   = $('#overlay');
//number of items
var scrollerContentCnt  = $scrollerContent.length;
var sliderHeight  = $(window).height();
//we will store the total height
//of the scroller container in this variable
var totalContent  = 0;
//one items height
var itemHeight   = 0;
然后,我们想创建滚动缩略图容器,毕竟其装载缩略图:

var cnt  = 0;
$thumbScroller.find('img').each(function(){
 var $img  = $(this);
 $('<img alt="">').load(function(){
  ++cnt;
  if(cnt == scrollerContentCnt){
   //one items height
   itemHeight = $thumbScroller.find('.content:first').height();
   buildScrollableItems();
   //show the scrollable container
   $thumbScroller.stop().animate({
    'left':'0px'
   },animSpeed);
  }
 }).attr('src',$img.attr('src'));
});

当我们点击缩略图可滚动的容器,我们想要显示的内容元素。我们将使用索引的缩略图为了知道哪些标题、图像显示和描述:

$scrollerContent.bind('click',function(e){
 var $this     = $(this);
 
 var idx     = $this.index();
 //if we click on the one shown then return
 if(current==idx) return;
 
 //if the current image is enlarged,
 //then we will remove it, but before
 //we will animate it just like we will do it with the thumb
 var $pg_large   = $('#pg_large');
 if($pg_large.length > 0){
  $pg_large.animate({
   'left':'350px',
   'opacity':'0'
  },animSpeed,function(){
   $pg_large.remove();
  });
 }
 
 //get the current and clicked item's elements
 var $currentTitle   = $pg_title.find('h1:nth-child('+(current+1)+')');
 var $nextTitle    = $pg_title.find('h1:nth-child('+(idx+1)+')');
 var $currentThumb  = $pg_preview.find('img.pg_thumb:eq('+current+')');
 var $nextThumb   = $pg_preview.find('img.pg_thumb:eq('+idx+')');
 var $currentDesc1   = $pg_desc1.find('div:nth-child('+(current+1)+')');
 var $nextDesc1    = $pg_desc1.find('div:nth-child('+(idx+1)+')');
 var $currentDesc2   = $pg_desc2.find('div:nth-child('+(current+1)+')');
 var $nextDesc2    = $pg_desc2.find('div:nth-child('+(idx+1)+')');
 
 //the new current is now the index of the clicked scrollable item
 current      = idx;
 
 //animate the current title up,
 //hide it, and animate the next one down
 $currentTitle.stop().animate({
  'top':'-50px'
 },animSpeed,function(){
  $(this).hide();
  $nextTitle.show().stop().animate({
   'top':'25px'
  },animSpeed);
 });
 
 //show the next image,
 //animate the current to the left and fade it out
 //so that the next one gets visible
 $nextThumb.show();
 $currentThumb.stop().animate({
  'left': '350px',
  'opacity':'0'
 },animSpeed,function(){
  $(this).hide().css({
   'left'  : '250px',
   'opacity' : 1,
   'z-index' : 1
  });
  $nextThumb.css({
   'z-index':9999
  });
 });
 
 //animate both current descriptions left / right and fade them out
 //fade in and animate the next ones right / left
 $currentDesc1.stop().animate({
  'left':'205px',
  'opacity':'0'
 },animSpeed,function(){
  $(this).hide();
  $nextDesc1.show().stop().animate({
   'left':'250px',
   'opacity':'1'
  },animSpeed);
 });
 $currentDesc2.stop().animate({
  'left':'295px',
  'opacity':'0'
 },animSpeed,function(){
  $(this).hide();
  $nextDesc2.show().stop().animate({
   'left':'250px',
   'opacity':'1'
  },animSpeed);
 });
 e.preventDefault();
});

当我们在内容区域点击缩略图(图片中),它将推动大型图像的大小。然后我们将加载大图缩略图后,插入。我们只需要隐藏然后缩略图,以显示大图片:
$pg_preview.find('.pg_thumb').bind('click',showLargeImage);
 
//enlarges the thumb
function showLargeImage(){
 //if theres a large one remove
 $('#pg_large').remove();
 var $thumb   = $(this);
 $thumb.unbind('click');
 var large_src  = $thumb.attr('alt');
 
 $overlay.fadeIn(200);
 //animate width to 600px,height to 500px
 $thumb.stop().animate({
  'width' : '600px',
  'height': '500px'
 },500,function(){
  $('<img id="pg_large">').load(function(){
   var $largeImg = $(this);
   $largeImg.insertAfter($thumb).show();
   $thumb.hide().css({
    'left'  : '250px',
    'opacity' : 1,
    'z-index' : 1,
    'width'  : '360px',
    'height' : '300px'
   });
   //when we click the large image
   //we revert the animation
   $largeImg.bind('click',function(){
    $thumb.show();
    $overlay.fadeOut(200);
    $(this).stop().animate({
     'width' : '360px',
     'height': '300px'
    },500,function(){
     $(this).remove();
     $thumb.css({'z-index' : 9999});
     //bind again the click event
     $thumb.bind('click',showLargeImage);
    });
 
   });
  }).attr('src',large_src);
 });
}

当我们改变窗口的大小,照片卷轴的高度需要适应新窗口高度:
$(window).resize(function() {
 var w_h   = $(window).height();
 $thumbScroller.css('height',w_h);
 sliderHeight = w_h;
});

最后,创建照片卷轴容器的功能