本文讲述了HTML5 jQuery插件流沙实现超酷的星际争霸2兵种分类展示效果。分享给大家供大家参考，具体如下：

因为本人是星际争霸系列游戏的忠实拥簇，所以在今天的框架教程中，我们将使用HTML5和框架插件流沙来创建一个超酷的星际争霸兵种效果图。希望大家喜欢！

先来看看效果图：

HTML5代码

首先我们使用HTML5的代码来创建一个超文本标记语言文档，将所需的流沙类库，及其框架类库，还有HTML5类库倒入，如下：

！DOCTYPE html html head meta charset=' utf-8 '/title星际争霸2 Unit Show Demo/title脚本src=' http :http://Ajax。谷歌API。com/Ajax/libs/jquery/1。6 .1/jquery。量滴js /脚本脚本src=' http : js/jquery。流沙。js /脚本脚本src=' http 3360 js/gbin 1。js /脚本！-我们的半铸钢钢性铸铁(Cast Semi-Steel)样式表文件- link rel='样式表href=' CSS/style。CSS '/！-[如果IE]脚本src=' http :http://html 5 shiv。谷歌代码。com/SVN/trunk/html 5。js /脚本！[endif]-/头体头h1星际争霸2单元/h1/头部导航id='导航条'/导航跨度id='细节'/跨度部分id='容器'//所有的兵种图片显示在这里/section /body/html在以上代码中，我们将在容器中插入需要展示的兵种图片，如下：

里数据-标记='人族单位img src=' http : unit/scv。gif' alt='人族单位'/丽丽数据-标记='神族单位img src=' http :单元/探测器。gif ' alt='神族单位'/丽丽数据-标记='虫族单位img src=' http : unit/幼虫。gif ' alt='虫族单位'/丽丽数据-标记='人族单位img src='以上代码中，我们定义了兵种类别，分别为人族，神族和虫族单位。

在HTML5中，我们可以在数据属性中存储数据，然后在框架中直接使用数据方法调用取出，以上代码中我们将通过数据标签中定义的类别来展示所有兵种。

爪哇岛描述语言代码

gb1。射流研究…

生成兵种的分类导航，如下：

$(文档)。ready(function(){ var items=$(' #)星际争霸Li’)，itemsByTag={ }；物品。每个(函数(I){ var elem=$(this)；//使用框架的html5数据处理方法取得兵种分类定义变量标记=elem.data('标记');elem.attr('data-id '，I)；//去空格标记=$。修剪（标签);if(！(itemsByTag中的标记)){ itemsByTag[标记]=[];} //添加到分类中itemsByTag[标记]。push(elem)；});});创建实际显示的兵种内容，如下：

函数createList(文本，项目){ var ul=$('ul '，{ ' class ' : ' hidden ' })；//生成兵种分类的数据$.每个(items，function(){ $(this)).克隆()。附录(ul)；});ul。appendo(' # container ')；var a=$('a '，{ html: text，href:'# '，data: {list:ul} }).appendo(' #导航条')；}生成导航栏点击动作，并生成放大效果。

//使用活着方法来给动态生成内容添加事件$('li ').live('click '，function(e){ if($('#details ')).是(“:可见”){ $(“# details”).hide()；} var src=$(this).查找(' img ').attr(' src ')；$(“# details”).html($('img '，{ src: src，宽度： '150px '，高度： ' 150 px ' })；var details=$(" # details ")；定义变量偏移量=$(这个).offset()；$(“# details”).css({'left':offset.left-32，' top':offset.top-32}).show(function() { $('#details img ')).动画({ width: '150px '，height: '150px '，}，800)；});});半铸钢钢性铸铁(铸造半钢)代码

/* -简单复位-*/* { margin :0；划水：0;}/* -常规样式- */html{ background: url('./unit/BG _ tile。jpg ')# 000 d20；}body{ font:14px Arial，sans-serif；最小高度： 930像素；}a，a :已访问{ text-摆设：无；outline : none color : # 54 a6 de；} a :悬停{ text-decoration :下划线；}/*-标题-*/标题{显示： }块；高度： 120像素；padding: 10px } #详细信息{ display:none位置：绝对；宽度宽度：150像素高度：150 pxz索引：10;背景： url('./单位/黑暗。png ')；border: 1px固体# 222;-moz-border-radius : 5px 5px 5px；}h1{ background:url('./单位/标志。gif ')不重复左上角；高度： 60px余量： 45px汽车；飞越：隐藏；文本对齐：中心；text-缩进：-99999 px；}/* -导航栏栏- */#navbar { background: url('./单位/灯。png ')；显示器：块；高度： 39pxmargin: 25px汽车；边距-top : 60px；相对位置：宽度： 600像素；文本对齐：居中；} # nav bar a { color : # ffffffdisplay :内联块；高度： 39px线高： 37pxpadd : 0 15 extxt-shadow :1 px 1px 1px # 315218；} #导航条a :悬停{ text-decoration : none} #导航条a .活动{背景： URL('./单位/黑暗。png ')；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)插图，-1px 0 1px rgba(0，0，0.2)插图；}/* -内容区-*/#容器{显示：块飞越：隐藏；宽度： 816像素；margin:0 auto} #容器li{ background: url('./单位/灯。png ')；向左浮动：高度： 90px列表样式：无外部无；余量： 6px相对位置：宽度： 90px-moz-box-shadow : 0 5px # 000；-web套件-box-shadow : 0 5px # 000；箱形阴影： 0 5px # 000} #集装箱ul { overflow:hidden背景： url('./单位/黑暗。png ')；} #集装箱ul。隐藏{显示：无；}完整实例代码点击此处本站下载。

PS:这里再为大家推荐几款代码格式化、美化工具，相信大家在以后的开发过程中会用得到：

在线Java脚本语言代码美化、格式化工具：http://tools.jb51.net/code/js

Java脚本语言压缩/格式化/加密工具：http://工具。JB 51。net/code/js压缩

服务器端编程语言(专业超文本预处理器的缩写)代码在线格式化美化工具：http://工具。JB 51。net/代码/PHP格式

可扩展置标语言代码在线格式化美化工具：http://工具。JB 51。net/code/xmlcodeformat

数据代码在线格式化/美化/压缩/编辑/转换工具：http://工具。JB 51。net/code/jsoncodeformat

在线数据代码检验、检验、美化、格式化工具：http://tools.jb51.net/code/json

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 、 《jquery选择器用法总结》 及《jQuery常用插件及用法总结》

希望本文所述对大家框架程序设计有所帮助。