jquery 动画_带有jQuery的动画组合库

jquery 动画

View demo 查看演示 Download Source 下载源

Today we will create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumbnails and a content area where we will display details about the portfolio item. The image can be enlarged by clicking on it, making it appear as an overlay.

今天，我们将使用jQuery创建一个动画的图库库。 画廊将包含一个用于缩略图的滚动器和一个内容区域，在此处我们将显示有关投资组合项目的详细信息。 通过单击可以放大图像，使其显示为覆盖图。

The idea is to animate the content elements whenever a thumbnail is clicked. We will animate the heading from the top, fade out the previous image and slide the descriptions from the sides.

想法是每当单击缩略图时都对内容元素进行动画处理。 我们将从顶部开始对标题进行动画处理，淡出先前的图像，并从侧面滑动描述。

The great template collection for the demo can be found on DzineBlog.

可以在DzineBlog上找到该演示的出色模板集合。

Let’s start with the HTML structure.

让我们从HTML结构开始。

标记 (The Markup)

First we will create the structure for the content area. For that we will create a main div element with the class “pg_content”. Inside we will place the main heading with the class and id “pg_title”, the preview container with the id “pg_preview” and the description elements with the class “pg_description”. The description divs will also have an individual class, i.e. “pg_desc1” and “pg_desc2”:

首先，我们将为内容区域创建结构。 为此，我们将创建一个主div元素，其类为“ pg_content”。 在内部，我们将主标题放置为类和标识为“ pg_title”，预览容器的标识为“ 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>

All the first elements inside of those containers will have a specific inline style, making them visible when we load the page. The rest of the elements will have their style defined in the CSS, i.e. their position when they are hidden.

这些容器内的所有第一个元素将具有特定的内联样式，使它们在加载页面时可见。 其余元素将在CSS中定义其样式，即它们在隐藏时的位置。

The thumbnails scroller will have the following structure (based on Manos Malihu’s thumbnail scroller):

缩略图滚动器将具有以下结构(基于Manos 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>

And finally, we will add a div for the semi-transparent overlay:

最后，我们将为半透明叠加层添加一个div：

<div id="overlay"></div>

Let’s take a look at the style.

让我们看一下样式。

CSS (The CSS)

We start by resetting the margins and paddings, and by the general body style:

我们从重新设置边距和填充开始，并从总体样式开始：

*{
	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;
}

This and more beautiful background images can be found on http://webtreats.mysitemyway.com. The overlay is going to have the following style:

可以在http://webtreats.mysitemyway.com上找到此更美丽的背景图像。 叠加层将具有以下样式：

#overlay{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background: #000;
	display:none;
	opacity:0.9;
}

If you want this to work in IE, please add the filter opacity property. The style for the thumbnail slider will be the following:

如果要在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;
}

All the elements in the content area will be placed absolutely:

内容区域中的所有元素都将绝对放置：

img.pg_thumb,
img#pg_large,
.pg_title h1,
.pg_content .pg_description div
{
	position:absolute;
}

The description divs will be not be displayed initially:

div的描述最初不会显示：

.pg_content .pg_description div{
	display:none;
}

The main heading will have a black patterned background image, just like the main thumbnail container. The position will be set to the values where the element will not be visible, hence we will have a top of -50px:

就像主缩略图容器一样，主标题将具有黑色图案的背景图像。 该位置将设置为元素不可见的值，因此我们的顶部为-50px：

.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;
}

We will then animate the top to 25px to make the heading visible.

然后，我们将顶部动画为25px，以使标题可见。

The thumb needs to be hidden, too:

拇指也需要隐藏：

img.pg_thumb{
	display:none;
}

The large preview of the image will be created when we click on a portfolio item in the content area. It will have the highest z-index:

单击内容区域中的项目组合项目时，将创建图像的大预览。 它将具有最高的z-index：

img#pg_large{
	z-index:9999;
}

The style of the thumbnail in the content area and the style of the large preview will be as follows:

内容区域中缩略图的样式和大预览的样式如下：

img.pg_thumb,
img#pg_large{
	top:90px;
	left:250px;
	padding:10px;
	background:transparent url(../bg.png) repeat top left;
	cursor:pointer;
}

The descriptions and their headlines are going to have the following style:

描述及其标题将具有以下样式：

.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;
}

and finally we need to define the positions of the description divs:

最后，我们需要定义description div的位置：

#pg_desc1 div{
	top:420px;
	left:205px;
}
#pg_desc2 div{
	top:560px;
	left:295px;
}

And that was the style. Let’s check out the JavaScript next.

那就是风格。 接下来让我们检查一下JavaScript。

JavaScript (The JavaScript)

The main idea is to create the scrollable thumbnails container, and to provide the transitions of the content elements. Also, we need to define what happens when we click on a medium image in the content area to view the large image preview. First, let’s define some variables:

主要思想是创建可滚动缩略图容器，并提供内容元素的过渡。 另外，我们需要定义在内容区域中单击中型图像以查看大图像预览时发生的情况。 首先，让我们定义一些变量：

//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;

Then, we want to create the scrollable thumbnails container, after all its thumbnail images are loaded:

然后，在加载所有缩略图图像之后，我们要创建可滚动缩略图容器：

var cnt		= 0;
$thumbScroller.find('img').each(function(){
	var $img 	= $(this);
	$('
   
   

    
    ').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'));
});

   
   

When we click on a thumbnail in the scrollable container, we want to display the according content elements. We will use the index of the thumbnail in order to know which title, image and description to show:

当我们单击可滚动容器中的缩略图时，我们要显示相应的内容元素。 我们将使用缩略图的索引来了解要显示的标题，图像和描述：

$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();
});

When we click on a thumbnail in the content area (the medium picture), it will animate to the size of the large image. Then we will load the large image and insert it after the thumbnail. We just need to hide the thumbnail then, in order to display the large image:

当我们单击内容区域(中图片)中的缩略图时，它将与大图像的大小相关联。 然后，我们将加载大图像并将其插入缩略图之后。 然后，我们只需要隐藏缩略图即可显示大图像：

$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(){
		$('
   
   

    
    ').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);
	});
}

   
   

When we resize the window, the scroller’s height needs to be adapted to the new window height:

调整窗口大小时，滚动条的高度需要适应新的窗口高度：

$(window).resize(function() {
	var w_h			= $(window).height();
	$thumbScroller.css('height',w_h);
	sliderHeight	= w_h;
});

And finally, the function for creating the scroller container (adapted from Manos’ script, check it out here: Manos Malihu’s thumbnail scroller)

最后，是用于创建滚动容器的功能(改编自Manos的脚本，在此处进行检查： Manos Malihu的缩略图滚动器)

function buildScrollableItems(){
	totalContent = (scrollerContentCnt-1)*itemHeight;
	$thumbScroller.css('height',sliderHeight)
	.mousemove(function(e){
		if($scrollerContainer.height()>sliderHeight){
			var mouseCoords		= (e.pageY - this.offsetTop);
			var mousePercentY	= mouseCoords/sliderHeight;
			var destY			= -(((totalContent-(sliderHeight-itemHeight))-sliderHeight)*(mousePercentY));
			var thePosA			= mouseCoords-destY;
			var thePosB			= destY-mouseCoords;
			if(mouseCoords==destY)
				$scrollerContainer.stop();
			else if(mouseCoords>destY)
				$scrollerContainer.stop()
				.animate({
					top: -thePosA
				},
				animSpeed,
				easeType);
			else if(mouseCoords

And that’s all! If you want to add some spice by cufonizing the headlines, you can add the following lines to the head of your HTML:

就这样！ 如果要通过修饰标题来添加一些香料，可以将以下几行添加到HTML的标题中：

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Quicksand_Book_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
	Cufon.replace('h1,h2');
</script>

You can find the beautiful Quicksand and other awesome fonts on www.fontsquirrel.com.

您可以在www.fontsquirrel.com上找到漂亮的流沙字体和其他令人敬畏的字体。

We hope you enjoyed the tutorial and find it useful!

我们希望您喜欢本教程并发现它有用！

翻译自: https://tympanus.net/codrops/2010/11/14/animated-portfolio-gallery/

jquery 动画