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 相关文章推荐
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
js打造数组转json函数
Jan 14 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
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
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
django orm模块中的 is_delete用法
2020/05/20 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
销售员自我评价怎么写
2013/09/19 职场文书
应届毕业生通用的自荐书范文
2014/02/07 职场文书
工人先锋号申报材料
2014/12/29 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
go语言中http超时引发的事故解决
2021/06/02 Golang