基于jQuery&CSS3的HTML5 portfolio特效制作_H5之家 - 中国HTML5教程资源分享第一站

在本教程中，我们将完成一个不错的基于jQuery和Quicksand插件的HTML5 portfolio特效。它支持定制，因此，你完全可以扩展实现更多功能。

【e800编译】在本教程中，我们将完成一个不错的基于jQuery和Quicksand插件的HTML5portfolio特效。它支持定制，因此，你完全可以扩展实现更多功能。你可在页面上展示各种分类的图片，它可把内容按不同的分类筛选显示出来，并在显示过程中附加动画效果，不但分类了图片，也使页面更加生动。

HTML

首先，第一步你需要创建一个新的HTML5标记文档。在<head>区域需要包括页面的样式，jQuery库，Quicksand插件以及script.js。

index.html

<!DOCTYPE html>

<html>

<head>

<title>Making a Beautiful HTML5 Portfolio |TutorialzineDemo</title>

<!– Our CSS stylesheet file –>

<!– Enabling HTML5 tags for older IE browsers–>

<!–[if lt IE 9]>

<scriptsrc=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>

<![endif]–>

</head>

<body>

<h1>My Portfolio</h1>

</header>

<!– The menu items will go here (generated by jQuery)–>

</nav>

<!– Your portfolio items go here –>

</ul>

</section>

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

</body>

</html>

在<body>中，包含一系列新的HTML5元素。header中含h1标题（logo样式），section元素中包含内容项的无序列表（后面你可以看到更多的列表由jQuery添加）以及nav元素。

＃stage 无序列表中包含了所有的文件项，这些文件项如下所示。其中每一项都包含一个HTML5数据属性，它定义了一系列以逗号分隔的标签。最后，当我们通过jQuery来循环遍历该列表时，我们将记录标记并创建绿色条栏中可选的分类。

</li>

</li>

</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，他们依然会看到你所有的内容，同样也是出于搜索引擎优化的目的。