使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果
日期：2011/11/01 来源：GBin1.com
因为本人是星际争霸系列游戏的忠实拥簇，所以在今天的jQuery教程中，我们将使用HTML5和jQuery插件Quicksand来创建一个超酷的星际争霸兵种效果图。希望大家喜欢！
如果你不熟悉jQuery插件Quicksand，那么推荐你查看这篇文章：2010年最佳jQuery插件，或者去Quicksand插件查看具体介绍。
在线演示在线下载
HTML5代码
首先我们使用HTML5的代码来创建一个html文档，将所需的quicksand类库，及其jquery类库，还有HTML5类库倒入，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Starcraft 2 Unit Show Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="js/jquery.quicksand.js"></script>
<script src="js/gbin1.js"></script>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="css/styles.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Starcraft 2 Unit</h1>
</header>
<nav id="navbar"></nav>
<span id="details"></span>
<section id="container"> //所有的兵种图片显示在这里
</section>
</body>
</html>
在以上代码中，我们将在container中插入需要展示的兵种图片，如下：
<li data-tag="Terran unit"><img src="unit/scv.gif" alt="Terran unit" /></li> <li data-tag="Protoss unit"><img src="unit/probe.gif" alt="Protoss unit" /></li> <li data-tag="Zerg unit"><img src="unit/larva.gif" alt="Zerg unit" /></li> <li data-tag="Terran unit"><img src="unit/marine.gif" alt="Terran unit" /></li> <li data-tag="Terran unit"><img src="unit/marauder.gif" alt="Terran unit" /></li> <li data-tag="Terran unit"><img src="unit/reaper.gif" alt="Terran unit" /></li> <li data-tag="Terran unit"><img src="unit/ghost.gif" alt="Terran unit" /></li> <li data-tag="Terran unit"><img src="unit/hellion.gif" alt="Terran unit" /></li>
以上代码中，我们定义了兵种类别，分别为Terran，Protoss和Zerg单位。
在HTML5中，我们可以在data属性中存储数据，然后在jQuery中直接使用data方法调用取出，以上代码中我们将通过data-tag中定义的类别来展示所有兵种。
Javascript代码
gbin1.js
生成兵种的分类导航，如下：
$(document).ready(function(){
var items = $('#starcraft li'), itemsByTag = {};
items.each(function(i){
var elem = $(this);
//使用jQuery的html5数据处理方法取得兵种分类
var tag = elem.data('tag');
elem.attr('data-id',i);
//去空格
tag = $.trim(tag);
if(!(tag in itemsByTag)){
itemsByTag[tag] = [];
}
//添加到分类中
itemsByTag[tag].push(elem);
});
...
...
});
创建实际显示的兵种内容，如下：
function createList(text,items){
var ul = $('<ul>',{'class':'hidden'});
//生成兵种分类的数据
$.each(items,function(){
$(this).clone().appendTo(ul);
});
ul.appendTo('#container');
var a = $('<a>',{
html: text,
href:'#',
data: {list:ul}
}).appendTo('#navbar');
}
生成导航栏点击动作，并生成放大效果。
//使用live方法来给动态生成内容添加事件
$('li').live('click', function(e){
if($('#details').is(":visible")){
$('#details').hide();
}
var src = $(this).find('img').attr('src');
$('#details').html($('<img>',{
src: src,
width: '150px',
height: '150px'
}));
var details = $('#details');
var offset = $(this).offset();
$('#details').css({"left":offset.left-32, "top":offset.top-32}).show(function() {
$('#details img').animate({
width: '150px',
height: '150px',
}, 800);
});
});