HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)

2019-11-20 09:55:07

字体：大中小

来源：转载

供稿：网友

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

因为本人是星际争霸系列游戏的忠实拥簇，所以在今天的jQuery教程中，我们将使用HTML5和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);  });});

CSS代码

/*-------------------------  Simple reset--------------------------*/*{  margin:0;  padding:0;}/*-------------------------  General Styles--------------------------*/html{  background: url('../unit/bg_tile.jpg') #000d20;}body{  font:14px Arial, sans-serif;  min-height: 930px;}a, a:visited {  text-decoration:none;  outline:none;  color:#54a6de;}a:hover{  text-decoration:underline;}/*----------------------------  Headers-----------------------------*/header{  display: block;  height: 120px;  padding: 10px;}#details{  display:none;  position:absolute;  width:150px;  height:150px;  z-index:10;  background: url('../unit/dark.png');  border: 1px solid #222;  -moz-border-radius: 5px 5px 5px 5px;}h1{  background:url('../unit/logo.gif') no-repeat left top;  height: 60px;  margin: 45px auto;  overflow: hidden;  text-align: center;  text-indent: -99999px;}/*----------------------------  navbar bar-----------------------------*/#navbar {  background: url("../unit/light.png") ;  display: block;  height: 39px;  margin: 25px auto;  margin-top: 60px;  position: relative;  width: 600px;  text-align:center;}#navbar a{  color: #FFFFFF;  display: inline-block;  height: 39px;  line-height: 37px;  padding: 0 15px;  text-shadow:1px 1px 1px #315218;}#navbar a:hover{  text-decoration:none;}#navbar a.active{  background: url("../unit/dark.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) inset,        -1px 0 1px rgba(0,0,0,0.2) inset;}/*----------------------------  Content area-----------------------------*/#container{  display:block;  overflow:hidden;  width: 816px;  margin:0 auto;}#container li{  background: url("../unit/light.png");  float: left;  height: 90px;  list-style: none outside none;  margin: 6px;  position: relative;  width: 90px;  -moz-box-shadow: 0 0 5px #000;  -webkit-box-shadow: 0 0 5px #000;  box-shadow: 0 0 5px #000;}#container ul{  overflow:hidden;  background: url("../unit/dark.png");}#container ul.hidden{  display:none;}

完整实例代码点击此处本站下载。

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

在线JavaScript代码美化、格式化工具：
http://tools.VeVB.COm/code/js

JavaScript压缩/格式化/加密工具：
http://tools.VeVB.COm/code/jscompress

PHP代码在线格式化美化工具：
http://tools.VeVB.COm/code/phpformat

XML代码在线格式化美化工具：
http://tools.VeVB.COm/code/xmlcodeformat

json代码在线格式化/美化/压缩/编辑/转换工具：
http://tools.VeVB.COm/code/jsoncodeformat

在线JSON代码检验、检验、美化、格式化工具：
http://tools.VeVB.COm/code/json

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

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

上一篇：15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】

下一篇：js的form表单提交url传参数(包含+等特殊字符)的两种解决方法