本文講述了HTML5+jQuery插件Quicksand實(shí)現(xiàn)超酷的星際爭(zhēng)霸2兵種分類展示效果。分享給大家供大家參考，具體如下：
因?yàn)楸救耸切请H爭(zhēng)霸系列游戲的忠實(shí)擁簇，所以在今天的jQuery教程中，我們將使用HTML5和jQuery插件Quicksand來(lái)創(chuàng)建一個(gè)超酷的星際爭(zhēng)霸兵種效果圖。希望大家喜歡！
先來(lái)看看效果圖：
HTML5代碼
首先我們使用HTML5的代碼來(lái)創(chuàng)建一個(gè)html文檔，將所需的quicksand類庫(kù)，及其jquery類庫(kù)，還有HTML5類庫(kù)倒入，如下：
<!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屬性中存儲(chǔ)數(shù)據(jù)，然后在jQuery中直接使用data方法調(diào)用取出，以上代碼中我們將通過(guò)data-tag中定義的類別來(lái)展示所有兵種。
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)建實(shí)際顯示的兵種內(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)航欄點(diǎn)擊動(dòng)作，并生成放大效果。
//使用live方法來(lái)給動(dòng)態(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;}完整實(shí)例代碼點(diǎn)擊此處本站下載。
PS：這里再為大家推薦幾款代碼格式化、美化工具，相信大家在以后的開(kāi)發(fā)過(guò)程中會(huì)用得到：
在線JavaScript代碼美化、格式化工具：
http://tools.VeVB.COm/code/js
JavaScript壓縮/格式化/加密工具：
http://tools.VeVB.COm/code/jscompress
PHP代碼在線格式化美化工具：
http://tools.VeVB.COm/code/phpformat
XML代碼在線格式化美化工具：
http://tools.VeVB.COm/code/xmlcodeformat
json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：
http://tools.VeVB.COm/code/jsoncodeformat
在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具：
http://tools.VeVB.COm/code/json
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
