【转载】基于jQuery&CSS3的HTML5 portfolio特效制作
在本教程中，我们将完成一个不错的基于jQuery和Quicksand插件的HTML5 portfolio特效。它支持定制，因此，你完全可以扩展实现更多功能。
【e800编译】在本教程中，我们将完成一个不错的基于 jQuery和Quicksand插件的HTML5portfolio特效。它支持定制，因此，你完全可以扩展实现更多功能。你可在页面上展示各种分类的图片，它可把内容按不同的分类筛选显示出来，并在显示过程中附加动画效果，不但分类了图片，也使页面更加生动。
HTML
首先，第一步你需要创建一个新的 HTML5标记文档。在<head>区域需要包括页面的样式，jQuery库，Quicksand插件以及script.js。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>Making a Beautiful HTML5 Portfolio |TutorialzineDemo </title>
<!– Our CSS stylesheet file –>
<link rel=”stylesheet” href=”assets/css/styles.css” />
<!– Enabling HTML5 tags for older IE browsers–>
<!–[if lt IE 9]>
<scriptsrc=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
</head>
<body>
<header>
<h1>My Portfolio </h1>
</header>
<nav id=”filter” >
<!– The menu items will go here (generated by jQuery)–>
</nav>
<section id=”container” >
<ul id=”stage” >
<!– Your portfolio items go here –>
</ul>
</section>
<footer>
</footer>
<!– Including jQuery, the Quicksand plugin, and our ownscript.js–>
<scriptsrc=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js” ></script>
<script src=”assets/js/jquery.quicksand.js” ></script>
<script src=”assets/js/script.js” ></script>
</body>
</html>
在<body>中，包含一系列新的HTML5元素。header中含h1标题（logo样式），section元素中包含内容项的无序列表（后面你可以看到更多的列表由jQuery添加）以及nav元素。
＃stage 无序列表中包含了所有的文件项，这些文件项如下所示。其中每一项都包含一个HTML5数据属性，它定义了一系列以逗号分隔的标签。最后，当我们通过jQuery来循环遍历该列表时，我们将记录标记并创建绿色条栏中可选的分类。
<li data-tags=”PrintDesign” >
<img src=”assets/img/shots/1.jpg” />
</li>
<li data-tags=”LogoDesign,Print Design” >
<img src=”assets/img/shots/2.jpg” />
</li>
<li data-tags=”WebDesign,Logo Design” >
<img src=”assets/img/shots/3.jpg” />
</li>
现在你可以放入任何你想要展示内容项，并进一步自定义组合。Quicksand插件会实现这个列表的动画过渡，你可以自由选择去尝试。
[ Demo] [ Download]
jQuery
Quicksand插件在于比较两个无序内容列表，找到他们里面匹配的LIS，并以动画形式将其放至它新的位置。至于jQuery脚本，我们需要将它写在本节中，它将循环遍历#stage列表中的内容项，并为它所找到的每个标签创建一个新的（隐藏）无序列表。同时，它还将创建一个新的菜单选项，由其触发两个列表间的Quicksand过渡。
首先，我们需要监听ready事件（加载页面最早的点，在这里我们可以访问DOM），检查相关标记并循环遍历所有项。
script.js– Part 1
$(document).ready( function(){
var items = $(‘#stage li’),
itemsByTags = {};
// Looping though all the li items:
items.each( function(i){
var elem = $( this),
tags = elem.data(‘tags’).split(‘,’);
// Adding a data-id attribute. Required by the Quicksandplugin:
elem.attr(‘data-id’,i);
$.each(tags, function(key,value){
// Removing extra whitespace:
value = $.trim(value);
if(!(value in itemsByTags)){
// Create an empty array to hold this item:
itemsByTags[value] = [];
}
// Each item is added to one array per tag:
itemsByTags[value].push(elem);
});
});
每个标签作为一个数组对象添加到itemsByTags。这意味着itemsByTags['Web Design']将是包含所有项的数组。我们使用这个对象为Quicksand在页面上创建隐藏的无序列表。
script.js– Part 2
function createList(text,items){
// This is a helper function that takes the
// text of a menu button and array of li items
// Creating an empty unordered list:
var ul = $(‘<ul>’,{‘class’:'hidden’});
$.each(items, function(){
// Creating a copy of each li item
// and adding it to the list:
$( this).clone().appendTo(ul);
});
ul.appendTo(‘#container’);
// Creating a menu item. The unordered list isadded
// as a data parameter (available via.data(‘list’)):
var a= $(‘<a>’,{
html: text,
href:’#',
data: {list:ul}
}).appendTo(‘#filter’);
}
此函数需要以分组的名称以及包含LI项的数组作为参数，然后克隆这些项至新的UL，同时在绿色栏中添加链接。
现在我们需要遍历所有分组并调用上面的函数，同时监听菜单项上的点击事件。
script.js– Part 3
// Creating the “Everything” option in themenu:
createList(‘Everything’,items);
// Looping though the arrays in itemsByTags:
$.each(itemsByTags, function(k,v){
createList(k,v);
});
$(‘#filter a’).live(‘click’, function(e){
var link = $( this);
link.addClass(‘active’).siblings().removeClass(‘active’);
// Using the Quicksand plugin to animate the liitems.
// It uses data(‘list’) defined by our createListfunction:
$(‘#stage’).quicksand(link.data(‘list’).find(‘li’));
e.preventDefault();
});
// Selecting the first menu item by default:
$(‘#filter a:first’).click();
现在，一切已经就绪，我们就可以继续页面造型设计。
CSS
页面样式本身并不是很有趣（你可以在assets/css/styles.css中看到）。绿色导航栏（＃filterbar）使用:before/:after伪元素在两端添加华丽的边角。由于它们也都是绝对定位的，他们也将随导航栏一同变化。
styles.css
#filter {
background: url(“../img/bar.png”) repeat-x 0 -94px;
display: block;
height: 39px;
margin: 55px auto;
position: relative;
width: 600px;
text-align: center;
-moz-box-shadow:0 4px 4px #000;
-webkit-box-shadow:0 4px 4px #000;
box-shadow:0 4px 4px #000;
}
#filter:before, #filter:after {
background: url(“../img/bar.png”) no-repeat;
height: 43px;
position: absolute;
top: 0;
width: 78px;
content: ”;
-moz-box-shadow:0 2px 0 rgba(0,0,0,0.4);
-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4);
box-shadow:0 2px 0 rgba(0,0,0,0.4);
}
#filter:before {
background-position: 0 -47px;
left: -78px;
}
#filter:after {
background-position: 0 0;
right: -78px;
}
#filter a{
color: #FFFFFF;
display: inline- block;
height: 39px;
line-height: 37px;
padding: 0 15px;
text-shadow:1px 1px 1px #315218;
}
#filter a:hover{
text-decoration: none;
}
#filter a.active{
background: url(“../img/bar.png”) repeat-x 0 -138px;
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2),
-1px 0 0 rgba(255, 255, 255, 0.2),
1px 0 1px rgba(0,0,0,0.2) inset,
-1px 0 1px rgba(0,0,0,0.2) inset;
}
Before/After元素
结论
您可以使用此模板来展示你的工作，它最好的一点就是，很容易进行定制。你唯一需要做的只是更改#stage list的相应项目，并定义一些新的标签–其余的工作都将由脚本去完成。如果没有启用JavaScript，他们依然会看到你所有的内容，同样也是出于搜索引擎优化的目的。
原文链接： http://tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/