使用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="应用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果" /></li><li data-tag="Protoss unit"><img src="unit/probe.gif" alt="应用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果" /></li><li data-tag="Zerg unit"><img src="unit/larva.gif" alt="应用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果" /></li><li data-tag="Terran unit"><img src="unit/marine.gif" alt="应用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果" /></li><li data-tag="Terran unit"><img src="unit/marauder.gif" alt="应用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果" /></li><li data-tag="Terran unit"><img src="unit/reaper.gif" alt="应用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果" /></li><li data-tag="Terran unit"><img src="unit/ghost.gif" alt="应用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果" /></li><li data-tag="Terran unit"><img src="unit/hellion.gif" alt="应用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果" /></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); }); }); 原文来自： 使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果