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 相关文章推荐
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
详解Vue中过度动画效果应用
May 25 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
跟混乱的页面弹窗说再见
Apr 11 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
canvas时钟效果
2017/02/16 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
python实现感知器
2017/12/19 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
pytorch标签转onehot形式实例
2020/01/02 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
一个SQL面试题
2014/08/21 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
车间组长岗位职责
2013/12/20 职场文书
高中校园广播稿
2014/01/11 职场文书
大学生个人求职信例文
2014/07/07 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
Django框架中表单的用法
2022/06/10 Python