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 相关文章推荐
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
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中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
用 JavaScript 迁移目录
2006/12/18 Javascript
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
Python 专题四 文件基础知识
2017/03/20 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
python异步存储数据详解
2019/03/19 Python
详解【python】str与json类型转换
2019/04/29 Python
如何将json数据转换为python数据
2020/09/04 Python
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
营业员实习自我鉴定
2013/12/07 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
学生思想表现的评语
2014/01/30 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
母亲节演讲稿
2014/05/27 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
军训通讯稿范文
2015/07/18 职场文书
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers