使用HTML5和jQuery插件Quicksand實現一個超酷的星際爭霸2兵種分類展示效果

日期：2011/11/01 來源：GBin1.com

因為本人是星際爭霸系列游戲的忠實擁簇，所以在今天的jQuery教程中，我們將使用HTML5和jQuery插件Quicksand來創建一個超酷的星際爭霸兵種效果圖。希望大家喜歡！

如果你不熟悉jQuery插件Quicksand，那么推薦你查看這篇文章：2010年最佳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="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屬性中存儲數據，然后在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);
    });
 });        

原文來自： 使用HTML5和jQuery插件Quicksand實現一個超酷的星際爭霸2兵種分類展示效果

posted @ 2011-11-01 19:04 igeekbar 閱讀(805) 評論(1) 收藏舉報

刷新頁面返回頂部

使用HTML5和jQuery插件Quicksand實現一個超酷的星際爭霸2兵種分類展示效果

HTML5代碼

Javascript代碼

公告

中文互聯： GBin1.com | RSS訂閱 | 郵件訂閱 | 手機訂閱