分类图片展示php源码,HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)...

本文讲述了HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果。分享给大家供大家参考，具体如下：

因为本人是星际争霸系列游戏的忠实拥簇，所以在今天的jQuery教程中，我们将使用HTML5和jQuery插件Quicksand来创建一个超酷的星际争霸兵种效果图。希望大家喜欢！

先来看看效果图：

HTML5代码

首先我们使用HTML5的代码来创建一个html文档，将所需的quicksand类库，及其jquery类库，还有HTML5类库倒入，如下：

Starcraft 2 Unit Show Demo

Starcraft 2 Unit

//所有的兵种图片显示在这里

在以上代码中，我们将在container中插入需要展示的兵种图片，如下：

以上代码中，我们定义了兵种类别，分别为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 = $('

• ',{'class':'hidden'});

//生成兵种分类的数据

$.each(items,function(){

$(this).clone().appendTo(ul);

});

ul.appendTo('#container');

var 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($('',{

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：这里再为大家推荐几款代码格式化、美化工具，相信大家在以后的开发过程中会用得到：

希望本文所述对大家jQuery程序设计有所帮助。