HTML5+jQuery插件Quicksand實現(xiàn)超酷的星際爭霸2兵種分類展示效果(附demo源碼下載)

更新時間：2016年05月25日 11:50:00 作者：GBin1

這篇文章主要介紹了HTML5+jQuery插件Quicksand實現(xiàn)超酷的星際爭霸2兵種分類展示效果,詳細(xì)分析了Quicksand插件的使用及圖片浮動顯示的實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下

本文講述了HTML5+jQuery插件Quicksand實現(xiàn)超酷的星際爭霸2兵種分類展示效果。分享給大家供大家參考，具體如下：

因為本人是星際爭霸系列游戲的忠實擁簇，所以在今天的jQuery教程中，我們將使用HTML5和jQuery插件Quicksand來創(chuàng)建一個超酷的星際爭霸兵種效果圖。希望大家喜歡！

先來看看效果圖：

HTML5代碼

首先我們使用HTML5的代碼來創(chuàng)建一個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屬性中存儲數(shù)據(jù)，然后在jQuery中直接使用data方法調(diào)用取出，以上代碼中我們將通過data-tag中定義的類別來展示所有兵種。

Javascript代碼

gbin1.js

生成兵種的分類導(dǎo)航，如下：

$(document).ready(function(){
  var items = $('#starcraft li'), itemsByTag = {};
  items.each(function(i){
    var elem = $(this);
    //使用jQuery的html5數(shù)據(jù)處理方法取得兵種分類
    var tag = elem.data('tag');
    elem.attr('data-id',i);
    //去空格
    tag = $.trim(tag);
    if(!(tag in itemsByTag)){
      itemsByTag[tag] = [];
    }
　　　//添加到分類中
    itemsByTag[tag].push(elem);
  });
  ...
  ...
});

創(chuàng)建實際顯示的兵種內(nèi)容，如下：

function createList(text,items){
  var ul = $('<ul>',{'class':'hidden'});
  //生成兵種分類的數(shù)據(jù)
  $.each(items,function(){
    $(this).clone().appendTo(ul);
  });
  ul.appendTo('#container');
  var a = $('<a>',{
    html: text,
    href:'#',
    data: {list:ul}
  }).appendTo('#navbar');
}

生成導(dǎo)航欄點擊動作，并生成放大效果。

//使用live方法來給動態(tài)生成內(nèi)容添加事件
$('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：這里再為大家推薦幾款代碼格式化、美化工具，相信大家在以后的開發(fā)過程中會用得到：

在線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代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：
http://tools.jb51.net/code/jsoncodeformat

在線JSON代碼檢驗、檢驗、美化、格式化工具：
http://tools.jb51.net/code/json

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: