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


Posted in Javascript onMay 25, 2016

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

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

先来看看效果图:

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

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.3water.com/code/js

JavaScript压缩/格式化/加密工具:
http://tools.3water.com/code/jscompress

PHP代码在线格式化美化工具:
http://tools.3water.com/code/phpformat

XML代码在线格式化美化工具:
http://tools.3water.com/code/xmlcodeformat

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

在线JSON代码检验、检验、美化、格式化工具:
http://tools.3water.com/code/json

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

Javascript 相关文章推荐
用JavaScript编写COM组件的步骤
Mar 17 Javascript
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
js时间戳与日期格式之间转换详解
Dec 11 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 #Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 #Javascript
js提交form表单,并传递参数的实现方法
May 25 #Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 #Javascript
动态设置form表单的action属性的值的简单方法
May 25 #Javascript
Angularjs过滤器使用详解
May 25 #Javascript
jQuery限制图片大小的方法
May 25 #Javascript
You might like
PHP自动生成月历代码
2006/10/09 PHP
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
header()函数使用说明
2006/11/23 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
用javascript实现自定义标签
2007/05/08 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
numpy中矩阵合并的实例
2018/06/15 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
pytest中文文档之编写断言
2019/09/12 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
三星美国官网:Samsung美国
2017/02/06 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
博士研究生自我鉴定范文
2013/12/04 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
2015年支教教师工作总结
2015/07/22 职场文书