摘要：
今天继续给大家介绍HTML5和jQuery插件结合使用生成的图形特效，这里我继续使用星际争霸2的图片元素给大家介绍一个360度全景预览兵种的特效实现，希望大家喜欢！在线演示在线下载友情提示：以上演示中图片使用较大，如果加载不流畅，请下载到本地运行。设置如下：rows:0这行代码说明我们使用的生成动画的图片是单行的。
今天继续给大家介绍HTML5和jQuery插件结合使用生成的图形特效，这里我继续使用星际争霸2的图片元素给大家介绍一个360度全景预览兵种的特效实现，希望大家喜欢！请大家多多留言！
友情提示：以上演示中图片使用较大，如果加载不流畅，请下载到本地运行。
如果你不清楚什么是360度全景预览或者不明白Reel是什么插件的话，请参考这篇文章：分享8个图片360度旋转展示的jQuery插件
如果你没有用过jQuery插件Reel的话，请你访问官方网站：Reel 1.1.3
HTML代码
<header>
<h1>Starcraft 2 Unit Animation Demo</h1>
</header>
<section id="container">
<ul id="starcraft">
<li data-tag="scv"><img src="http://t.zoukankan.com/images/scv.gif" alt="Terran unit" /></li>
<li data-tag="probe"><img src="http://t.zoukankan.com/images/probe.gif" alt="Protoss unit" /></li>
<li data-tag="larva"><img src="http://t.zoukankan.com/images/larva.gif" alt="Zerg unit" /></li>
<li data-tag="marine"><img src="http://t.zoukankan.com/images/marine.gif" alt="Terran unit" /></li>
<li data-tag="zealot"><img src="http://t.zoukankan.com/images/zealot.gif" alt="Protoss unit" /></li>
<li data-tag="zergling"><img src="http://t.zoukankan.com/images/zergling.gif" alt="Zerg unit" /></li>
<li data-tag="battlecruiser"><img src="http://t.zoukankan.com/images/battlecruiser.gif" alt="Terran unit" /></li>
<li data-tag="mothership"><img src="http://t.zoukankan.com/images/mothership.gif" alt="Protoss unit" /></li>
<li data-tag="mutalisk"><img src="http://t.zoukankan.com/images/mutalisk.gif" alt="Zerg unit" /></li>
</ul>
<div id="demowrap">
<div id="animationdemo"></div>
</div>
</section>
Javascript
var items = $('#starcraft li');
items.each(function(i){
var item = $(this);
var tag = item.data('tag');
$('#animationdemo').append('<img id="'+tag+'" src="http://t.zoukankan.com/images/' + tag + '.png">');
$('#animationdemo img').hide();
});
var demos = $('#animationdemo img');
demos.each(function(i){
$(this).reel({
speed: 0.3,
opening: 1,
frames: 31,
footage: 31,
rows: 0,
hint: 'Starcraft2 Unit',
loops: true,
indicator: 1,
directional: true
});
});
以上代码中，我们针对每一个兵种对应生成一个Reel的360度动画预览，Reel插件针对每一个img来生成对应的360度旋转预览图。
你需要提供以下俩张图片，一张是用来指定选择器的图片，命名为probe.png，如下：
以及真正生成动画的图片，这里需要你自己使用做图工具生成，命名为probe-reel.png，你可以使用单行的png图片，也可以使用多行的png图片，这里我们使用单行图片。设置如下：
rows: 0
这行代码说明我们使用的生成动画的图片是单行的。其它参数设置如下：
- speed：动画速度
- opening：开启动画的持续时间
- frames：总帧数，也就是你提供的图片里动作分解的格式
- footage：图片中每一行的帧数
- rows：动画图片是否是多行
- hint：动画显示的说明
- loops：循环数
- directional：是否支持方向
更多参数请参考Reel网站的介绍：
CSS
/*-------------------------
Simple reset
--------------------------*/
*{
margin:0;
padding:0;}/*-------------------------
General Styles
--------------------------*/
html{
background:url('../images/terran.jpg') #000d20 center top no-repeat;;
}
body{
font:14px Arial, sans-serif;
min-height:930px;}/*----------------------------
Headers
-----------------------------*/
header{
display:block;
height:260px;
padding:10px;
width:600px;
margin:0 auto;}
#details{
display:none;
position:absolute;
width:150px;
height:150px;
z-index:10;
background:url('../images/dark.png');
border:1px solid #222;
-moz-border-radius:5px 5px 5px 5px;}
h1{
background:url('../images/logo.gif') no-repeat left top;
height:60px;
margin:45px auto;
overflow:hidden;
text-align:center;
text-indent:-99999px;}/*----------------------------
Content area
-----------------------------*/
#container{
display:block;/*overflow:hidden;*/
width:610px;
margin:0 auto;
border:0px solid #fff;}
#container li{
background:url("../images/light.png");
float:left;
height:90px;
list-style:none outside none;
margin:5px;
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{
background:url("../images/dark.png");}
#starcraft{
float:left;
width:300px;}
#demowrap{
float:right;
width:290px;
height:290px;
margin:0px auto;
margin-top:0;
margin-bottom:0;
background:url("../images/dark.png");
padding:5px;}
#animationdemo{
margin:0px auto;
width:290px;
height:290px;
overflow:hidden;
background:url("../images/light.png");}
.animation{
width:290px;
height:290px;}
.jquery-reel-indicator{
color:#fff;}
全部代码完成。 请大家留言多提宝贵意见， 谢谢！