HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
本文讲述了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.jb51.net/code/js
JavaScript压缩/格式化/加密工具：
http://tools.jb51.net/code/jscompress
PHP代码在线格式化美化工具：
http://tools.jb51.net/code/phpformat
XML代码在线格式化美化工具：
http://tools.jb51.net/code/xmlcodeformat
json代码在线格式化/美化/压缩/编辑/转换工具：
http://tools.jb51.net/code/jsoncodeformat
在线JSON代码检验、检验、美化、格式化工具：
http://tools.jb51.net/code/json
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
基于Jquery插件开发之图片放大镜效果(仿淘宝)
需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大! 思索:为了考虑开发速度,最先考虑的是想使用网络上的现成代码!但是大致搜索了一下,网上可用的代码并不多,而且部分效果并不理想!而且有些代码,估计阅读下来比自己写一个成本还要高,于是产生了自己写一个jquery的插件的想法! 原理:最起考虑的原理是,两张图片,一张小图,一张大图,先获取鼠标在小图上面的坐标,然后以一个div来显示大图,并根据小图的坐标乘以大图除以小图得到的倍数定位!开始是把大图设为平铺不重复北景,然后使用背景的p
-
jquery.lazyload 实现图片延迟加载jquery插件
什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升. 怎么实现ImageLazyLoad 一.使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小) 在线压缩js http://closure-compil
-
JQuery插件Quicksand实现超炫的动画洗牌效果
Quicksand是一款基于jQuery的插件,能对页面上的元素进行重新排序及过滤,并且有非常不错的洗牌过渡动画效果,可以应用在很多项目中来增强用户体验.本文以实际项目应用来讲解Quicksand的使用. XHTML <div id="nav"> <ul> <li id="all" class="cur">所有功能模块</li> <li id="app">应用程序&l
-
jQuery插件原来如此简单 jQuery插件的机制及实战
jQuery插件的种类 1.封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件.此类插件可以发挥出jQuery选择器的强大优势,有相当一部分的jQuery的方法,都是在jQuery脚本库内部通过这种形式"插"在内核上的,例如parent()方法,appendTo()方法等. 2.封装全局函数 可以将独立的函数加到jQuery命名空间下.如常用的jQuery.ajax()方法.去首尾空格的jQuery.trim()方法,都是jQ
-
跟我一起学写jQuery插件开发方法（附完整实例及下载）
很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效果发愁的时候,你潇洒的过去,然后对她说:"嗨,美女,用这个吧.这是我写的一个jQuery插件."我想基本上你的人生大事就能很快解决. 先想好做个什么功能 这是第一步,也是很重要的一步,鉴于咱们都是刚学习写jQuery插件,所以,这个功能一定要简单一些.不要想一口就吃个胖子,咱也吃不了.咱还
-
Jquery插件之多图片异步上传
1.初始化上传控件数量. 复制代码 代码如下: $(document).ready(function() { $('#H_File').uploadFile({ key: 'test',count:3 }); }); 以前的设计思想是,初始化上传控件数量,页面显示为1个上传控件,每当上传成功后,在下面创建一个上传控件. 2.上传图片成功后 这就是最终的效果,如果您有更好的插件,希望一起开源. 其他的就不多说了,如果您感兴趣,点击下载源码 /201010/yuanma/jquery_aspnet_
-
分享2个jQuery插件--jquery.fileupload与artdialog
这些是我们项目中必不可少的东西,所以今天推荐两个一个叫做artdialog是个iframe的jquery插件,一个叫jquery file upload,我看网上很少有这个插件jquery file upload的插件使用教程,今天我就简单的介绍和写一点使用的方法! 简单用代码举例子 最小化的方法 复制代码 代码如下: data-url是上传后执行上传文件的php方法 <input id="fileupload" type="file" name="
-
jquery插件lazyload.js延迟加载图片的使用方法
如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度. Lazy Load 插件原理 修改目标img元素的src属性为orginal属性,从而中断图片的加载.检测滚动状态,然后把网页可视区域中的img的src属性还原然后加载图片,从而制造了一种缓冲加载的效果.代
-
强烈推荐240多个jQuery插件提供下载
jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML documents.events.实现动画效果,并且方便地为网站提供 AJAX 交互. jQuery 还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择. jQuery 能够使用户的 html 页保持代码和 html 内容分离,也就是说,不用再在 html 里面插入一堆js来调用命令了,只需定义 id 即可.今天在Kollermedia.at上发现了一篇J
-
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
本文讲述了HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果.分享给大家供大家参考,具体如下: 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我们将使用HTML5和jQuery插件Quicksand来创建一个超酷的星际争霸兵种效果图.希望大家喜欢! 先来看看效果图: HTML5代码 首先我们使用HTML5的代码来创建一个html文档,将所需的quicksand类库,及其jquery类库,还有HTML5类库倒入,如下: <!DOCTYPE h
-
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
本文实例讲述了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果.分享给大家供大家参考,具体如下: 该插件乃文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实际需求来设置是否添加左右切换图片的效果.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit
-
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
本文实例讲述了HTML5游戏引擎LTweenLite实现的超帅动画效果.分享给大家供大家参考,具体如下: lufylegend.js是一个开源的HTML5游戏引擎,在游戏中往往会有各种的动画,这些动画有些是flash文件,有些是视频文件,本次就来利用lufylegend制作一个帅气的游戏动画,如下图. 测试连接如下: http://lufylegend.com/demo/effects01/ 一.准备工作 准备工作当然就是引擎的下载了. lufylegend.js引擎官网 http://lufy
-
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
本文实例讲述了jQuery实现横向带缓冲的水平运动效果.分享给大家供大家参考,具体如下: 这里使用jQuery生成横向带缓冲的水平运动,用鼠标点一下才能激活,点一下以后可看到Div层在做水平运动,由此可派生出诸多的其它形式的动画效果. 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x
-
jQuery+css3实现转动的正方形效果(附demo源码下载)
本文实例讲述了jQuery+css3实现转动的正方形效果.分享给大家供大家参考,具体如下: 主要是应用到了css3中的rotate来控制旋转角度 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l
-
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
本文实例讲述了jQuery实现可以控制图片旋转角度效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww
-
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
本文实例讲述了jQuery插件echarts实现的去掉X轴.Y轴和网格线效果.分享给大家供大家参考,具体如下: 1.问题背景: 如何在echarts中,去掉X轴.Y轴和网格线,只留数据图形 2.实现源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-去掉X轴.Y轴和网格线</title> <script type=&q
-
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
本文实例讲述了jQuery模拟实现经典FLASH导航动画效果的方法.分享给大家供大家参考,具体如下: 一.前言: FLASH在中国互联网发展初期的时候非常的热,各种各样的矢量造型和动作,加上专门配制的音效,让很多人眼前一亮,并且让很多人迷上了这种新兴的媒体,那时候兴起了很多大大小小的专门发布FLASH的网站,印象中记得的像"FLASH闪吧"."FLASH帝国"."闪客天地"等这些都是很火很热的网站,在当时盛极一时,由此也产生了一大批的专门从事FL
-
jQuery模拟实现的select点击选择效果【附demo源码下载】
本文实例讲述了jQuery模拟实现的select点击选择效果.分享给大家供大家参考,具体如下: 有时候有些HTML元素无法让我们用样式控制进行控制,但是射鸡师或是客户的需求就是需要这种效果,还要让每个浏览器都显示同样的效果,这时候就会让我们这些所谓的前端攻城师很蛋疼,客户会认为交了点钱不让你折腾些东西,以为你是没做事的.面对这些对技术一窍不通的客户,技术对于他们来说就是一坨屎,以为我们都是用意念来写代码做程序的,所以都把我们的劳动成果看作是廉价得像是简单的拉出一泡屎而已. 虽然很喜欢什么都没有修
-
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
本文实例讲述了jQuery悬停文字提示框插件jquery.tooltipster.js用法.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html页面: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery Tooltips悬停文字提示框效果</title> <meta charset="utf-8" /> <lin