使用jQuery的缩略图导航库 jquery 导航

在本教程中，我们将创建一个具有可滚动缩略图的特殊图库，它可以从导航栏中滑出。我们将使用jQuery和一些CSS3属性作为样式。主要的想法是有一张专辑的菜单，每个项目在点击时都会显示一个带有缩略图的水平条。当用户将鼠标移动到左边或右边时，缩略图容器将自动滚动。

当单击缩略图时，将在页面的背景中载入一个完整的图像预览。我们还将为其中一个菜单项设置一个文本容器。

这些美丽的照片来自于马克·塞巴斯蒂安在Flickr上的照片。您可以在“IT”因素的设置中找到演示中使用的所有图像。请查看演示中包含的Creative Commons许可证。

所以,让我们开始吧!

标记

我们的HTML主要是由一个包装器和菜单列表组成。我们将会有一些其他的元素，比如全图，加载div和halftone覆盖。首先，让我们创建包装器:

<div id="st_main" class="st_main"></div>

在我们的包装器内部，我们将添加以下内容:

<img src="images/album/1.jpg" alt="" class="st_preview" style="display:none;"/><div class="st_overlay"></div><h1>Mark Sebastian</h1><div id="st_loading" class="st_loading">
<span>Loading...</span></div>

第一个元素是我们的完整预览图像。覆盖层将是一个固定的div，它将在整个屏幕上重复播放半色调模式，以在图像上创建一个漂亮的叠加效果。我们还添加了标题和加载div。

然后我们添加一个无序列表，其中每个li元素将包含其标题和缩略图包装的span。最后一个li元素将包含一些文本包装器，这就是为什么我们不给它class“album”的原因。稍后，在jQuery函数中，我们需要区分它。

<ul id="st_nav" class="st_navigation">
<li class="album">
<span class="st_link">
Newest Collection			<span class="st_arrow_down"></span>
</span>
<div class="st_wrapper st_thumbs_wrapper">
<div class="st_thumbs">
<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
...			</div>
</div>
</li>
...	<li>
<span class="st_link">
About			<span class="st_arrow_down"></span>
</span>
<div class="st_about st_thumbs_wrapper">
<div class="st_subcontent">
<p>
Some description				</p>
</div>
</div>
</li></ul>

缩略图图像获取路径的alt值为完整大小的图像。这可能不是alt属性的正确使用，但是它对我们的功能非常方便，我们将这样使用它。

让我们来看看它的风格。

CSS

首先，让我们重新设置所有元素的边框和边距，并定义一般样式:

*{	margin:0;	padding:0;}body{	font-family:"Myriad Pro","Trebuchet MS", Helvetica, sans-serif;	font-size:16px;	color:#fff;	background-color:#000;	overflow:hidden;}h1{	margin:20px;	font-size:40px;}

使身体溢出隐藏我们避免任何滚动条出现，但你可以适应你的需要。也就是说，如果用户可以完全查看完整大小的图像，那么您可能想要删除溢出:隐藏属性。

接下来，我们将定义完整大小图像的样式、覆盖层和加载div:

.st_main img.st_preview{	position:absolute;	left:0px;	top:0px;	width:100%;}.st_overlay{	width:100%;	height:100%;	position:fixed;	top:0px;	left:0px;	background:transparent url(../images/pattern.png) repeat-x bottom left;	opacity:0.3;}.st_loading{	position:fixed;	top:10px;	right:0px;	background:#000 url(../images/icons/loader.gif) no-repeat 10px 50%;	padding:15px 40px 15px 60px;	-moz-box-shadow:0px 0px 2px #000;	-webkit-box-shadow:0px 0px 2px #000;	box-shadow:0px 0px 2px #000;	opacity:0.6;}

通过设置图像宽度始终为100%，我们确保它占据了页面上的所有水平空间。对于非常大的屏幕，图像看起来可能是像素化的，当然，可以通过使用巨大的图像来避免。在我们的演示中，我们使用了1600像素的最大宽度来让加载时间变得可以忍受。图像顶部的半色调图案有助于掩饰像素化的效果。

请注意，当使用不透明度时，如果您想在IE中实现半透明效果，则需要使用IE过滤属性。不过，如果使用过滤属性，则覆盖看起来像垃圾。检查ZIP文件，我将IE DXImageTransform过滤器添加到相应的样式中。

导航将被定位为:

ul.st_navigation{	position:absolute;	width:100%;	top:140px;	left:-300px;	list-style:none;}

初始的左值设置为- 300像素，因为我们希望在加载完整的图像后将其放入。如果在列表项中使用较长的标题，则可能需要调整此值。

我们的列表元素将有以下样式:

ul.st_navigation li {	float:left;	clear:both;	margin-bottom:8px;	position:relative;	width:100%;}

标题的跨度将样式如下:

ul.st_navigation li span.st_link{	background-color:#000;	float:left;	position:relative;	line-height:50px;	padding:0px 20px;	-moz-box-shadow:0px 0px 2px #000;	-webkit-box-shadow:0px 0px 2px #000;	box-shadow:0px 0px 2px #000;}

接下来，我们定义了用于打开和关闭缩略图容器的向上/向下箭头的span的样式:

ul.st_navigation li span.st_arrow_down,ul.st_navigation li span.st_arrow_up{	position:absolute;	margin-left:15px;	width:40px;	height:50px;	cursor:pointer;	-moz-box-shadow:0px 0px 2px #000;	-webkit-box-shadow:0px 0px 2px #000;	box-shadow:0px 0px 2px #000;}ul.st_navigation li span.st_arrow_down{	background:#000 url(../images/icons/down.png) no-repeat center center;}ul.st_navigation li span.st_arrow_up{	background:#000 url(../images/icons/up.png) no-repeat center center;}

缩略图容器的包装器将绝对定位，我们希望隐藏任何垂直溢出:

.st_wrapper{	display:none;	position: absolute; width:100%; height:126px; overflow-y:hidden;	top:50px; left:0px;}

虽然拇指只有120个像素高，但我们想要留下一些空间，这样盒子里的阴影就不会被切掉。

这个拇指指甲的容器将被设计成如下:

.st_thumbs{ height:126px; margin: 0;}

这些缩略图会有一个整齐的方框阴影和一些间距:

.st_thumbs img{ float:left; margin:3px 3px 0px 0px; cursor:pointer;	-moz-box-shadow:1px 1px 5px #000;	-webkit-box-shadow:1px 1px 5px #000;	box-shadow:1px 1px 5px #000;	opacity:0.7;}

st_about类是用于文本容器的包装类:

.st_about{	display:none;	position:absolute;	top:50px; left:0px;	opacity:0.6;}

最后是文本容器本身:

.st_subcontent{	background:#000;	padding:30px;	-moz-box-shadow:0px 0px 10px #000;	-webkit-box-shadow:0px 0px 10px #000;	box-shadow:0px 0px 10px #000;}

这就是所有的风格!让我们做一些魔法!

JavaScript

在我们的jQuery函数中，我们首先定义一些变量:

//the loading imagevar $loader		= $('#st_loading');//the ul elementvar $list		= $('#st_nav');//the current image being shownvar $currImage 	= $('#st_main').children('img:first');

我们要做的第一件事就是加载当前的完整大小的图像。加载完成后，我们希望导航显示:

$('<img>').load(function(){	$loader.hide();	$currImage.fadeIn(3000);	//slide out the menu
setTimeout(function(){		$list.animate({'left':'0px'},500);
},	1000);
}).attr('src',$currImage.attr('src'));

buildThumbs()函数计算所有缩略图容器的宽度。我们稍后需要这个自动滚动功能的值:

buildThumbs();function buildThumbs(){	$list.children('li.album').each(function(){		var $elem 			= $(this);		var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');		var $thumbs 		= $thumbs_wrapper.children(':first');		//each thumb has 180px and we add 3 of margin
var finalW 			= $thumbs.find('img').length * 183;		$thumbs.css('width',finalW + 'px');		//make this element scrollable
makeScrollable($thumbs_wrapper,$thumbs);
});
}

接下来，我们来定义点击箭头的行为。如果它掉下来了，我们会扩大这个拇指甲的容器，再把其他东西藏起来。如果它是向上的，我们将使当前的容器再次隐藏。

$list.find('.st_arrow_down').live('click',function(){	var $this = $(this);
hideThumbs();	$this.addClass('st_arrow_up').removeClass('st_arrow_down');	var $elem = $this.closest('li');	$elem.addClass('current').animate({'height':'170px'},200);	var $thumbs_wrapper = $this.parent().next();	$thumbs_wrapper.show(200);
});$list.find('.st_arrow_up').live('click',function(){	var $this = $(this);	$this.addClass('st_arrow_down').removeClass('st_arrow_up');
hideThumbs();
});

在我们定义“hide拇指”函数之前，我们要指定当点击一个拇指时发生了什么。完整大小的图像会显示，在加载的时候我们会让加载div出现。然后我们将不透明度设置为动画，并将图像淡入:

$list.find('.st_thumbs img').bind('click',function(){	var $this = $(this);
$loader.show();
$('<img class="st_preview"/>').load(function(){		var $this = $(this);		var $currImage = $('#st_main').children('img:first');
$this.insertBefore($currImage);
$loader.hide();
$currImage.fadeOut(2000,function(){
$(this).remove();
});
}).attr('src',$this.attr('alt'));
}).bind('mouseenter',function(){
$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
$(this).stop().animate({'opacity':'0.7'});
});

函数隐藏缩略图看起来如下:

function hideThumbs(){
$list.find('li.current')
.animate({'height':'50px'},400,function(){
$(this).removeClass('current');
})
.find('.st_thumbs_wrapper')
.hide(200)
.andSelf()
.find('.st_link span')
.addClass('st_arrow_down')
.removeClass('st_arrow_up');
}

我们将李的高度进行了动画制作然后让这个拇指甲的容器就这样消失了。我们还需要正确地设置箭头跨度的类。

最后，我们将定义makeScrollable()函数，它可以在鼠标移动时自动地将缩略图进行滚动:

function makeScrollable($outer, $inner){	var extra 			= 800;	//Get menu width
var divWidth = $outer.width();	//Remove scrollbars
$outer.css({
overflow: 'hidden'
});	//Find last image in container
var lastElem = $inner.find('img:last');	$outer.scrollLeft(0);	//When user move mouse over menu
$outer.unbind('mousemove').bind('mousemove',function(e){		var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;		var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;		$outer.scrollLeft(left);
});
}

为了让标题和添加一些像样的阴影，我们将把以下内容包括在我们的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('span,p,h1',{
textShadow: '0px 0px 1px #ffffff'
});</script>

这是它!我们希望您喜欢本教程并发现它很有用!