本文讲述了HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果。分享给大家供大家参考,具体如下:
因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我们将使用HTML5和jQuery插件Quicksand来创建一个超酷的星际争霸兵种效果图。希望大家喜欢!
先来看看效果图:
HTML5代码
首先我们使用HTML5的代码来创建一个html文档,将所需的quicksand类库,及其jquery类库,还有HTML5类库倒入,如下:
rush:xhtml;">
Starcraft 2 Unit Show Demo
Starcraft 2 Unit
在以上代码中,我们将在container中插入需要展示的兵种图片,如下:
rush:xhtml;">
以上代码中,我们定义了兵种类别,分别为Terran,Protoss和Zerg单位。
在HTML5中,我们可以在data属性中存储数据,然后在jQuery中直接使用data方法调用取出,以上代码中我们将通过data-tag中定义的类别来展示所有兵种。
Javascript代码
gbin1.js
rush: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);
});
...
...
});
rush:js;">
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');
}
生成导航栏点击动作,并生成放大效果。
',{
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代码
完整实例代码点击此处。
PS:这里再为大家推荐几款代码格式化、美化工具,相信大家在以后的开发过程中会用得到:
在线JavaScript代码美化、格式化工具:
json代码在线格式化/美化/压缩/编辑/转换工具:
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。