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;
