使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果

jjfat

浏览: 289283 次
性别:
来自: 北京

最近访客更多访客>>

gdtiti

wqp310520

Csupport

jihong10102006

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

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

如果你不熟悉jQuery插件Quicksand，那么推荐你查看这篇文章：2010年最佳jQuery插件，或者去Quicksand插件查看具体介绍。

使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果

在线演示在线下载

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兵种分类展示效果

0
顶

1
踩

分享到：

分享8个图片360度旋转展示的jQuery插件 | 分享2011年50个最棒的wordpress主题

2011-11-01 19:01
浏览 855
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论