Ubuntu 16.04下安裝PHP 7過程詳解
663
2024-01-10
本文講述了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="http://www.gimoo.net/t/1902/js/jquery.quicksand.js"></script>
<script src="http://www.gimoo.net/t/1902/js/gbin1.js"></script>
< Our CSS stylesheet file -->
<link rel="stylesheet" />
<[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="http://www.gimoo.net/t/1902/unit/scv.gif" alt="Terran unit" /></li> <li data-tag="Protoss unit"><img src="http://www.gimoo.net/t/1902/unit/probe.gif" alt="Protoss unit" /></li> <li data-tag="Zerg unit"><img src="http://www.gimoo.net/t/1902/unit/larva.gif" alt="Zerg unit" /></li> <li data-tag="Terran unit"><img src="http://www.gimoo.net/t/1902/unit/marine.gif" alt="Terran unit" /></li> <li data-tag="Terran unit"><img src="http://www.gimoo.net/t/1902/unit/marauder.gif" alt="Terran unit" /></li> <li data-tag="Terran unit"><img src="http://www.gimoo.net/t/1902/unit/reaper.gif" alt="Terran unit" /></li> <li data-tag="Terran unit"><img src="http://www.gimoo.net/t/1902/unit/ghost.gif" alt="Terran unit" /></li> <li data-tag="Terran unit"><img src="http://www.gimoo.net/t/1902/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.gimoo.net/code/js
JavaScript壓縮/格式化/加密工具：
http://tools.gimoo.net/code/jscompress
PHP代碼在線格式化美化工具：
http://tools.gimoo.net/code/phpformat
XML代碼在線格式化美化工具：
http://tools.gimoo.net/code/xmlcodeformat
json代碼在線格式化/美化/壓縮/編輯/轉換工具：
http://tools.gimoo.net/code/jsoncodeformat
在線JSON代碼檢驗、檢驗、美化、格式化工具：
http://tools.gimoo.net/code/json
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
