使用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果

这是一个用HTML5和jQuery插件结合使用生成的图形特效，是基于星际争霸2的图片资源的。

在线演示

演示demo下载

HTML代码

<header><h1>Starcraft 2 Unit Animation Demo</h1>
</header><section id="container"><ul id="starcraft"><li data-tag="scv"><img src="data:images/scv.gif" alt="Terran unit" /></li><li data-tag="probe"><img src="data:images/probe.gif" alt="Protoss unit" /></li><li data-tag="larva"><img src="data:images/larva.gif" alt="Zerg unit" /></li><li data-tag="marine"><img src="data:images/marine.gif" alt="Terran unit" /></li><li data-tag="zealot"><img src="data:images/zealot.gif" alt="Protoss unit" /></li><li data-tag="zergling"><img src="data:images/zergling.gif" alt="Zerg unit" /></li><li data-tag="battlecruiser"><img src="data:images/battlecruiser.gif" alt="Terran unit" /></li><li data-tag="mothership"><img src="data:images/mothership.gif" alt="Protoss unit" /></li><li data-tag="mutalisk"><img src="data: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 class="animation" id="'+tag+'" src="data: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：是否支持方向
接下来是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;

}

使用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果相关推荐

使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果
为什么80%的码农都做不了架构师?>>> 日期:2011/11/01 来源:GBin1.com 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我们将使用 ...
分类图片展示php源码,HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)...
本文讲述了HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果.分享给大家供大家参考,具体如下: 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我 ...
分享8个超棒的基于HTML5和jQuery的开发教程
HTML5和jQuery组合目前对于web开发人员来说是强大的工具之一,使用这个组合能够帮助你扩展你设计的局限,实现一些非常绚丽及其强大的web应用或者网站.尤其是最近jQuery 1.0的发布,更助 ...
HTML5与jQuery组合：Web开发教程实践
HTML5 和jQuery组合目前对于web开发人员来说是强大的工具之一,使用这个组合能够帮助你扩展你设计的局限,实现一些非常绚丽及其强大的web应用或者网站.尤其是最近jQuery 1.0的发布, ...
一个超酷的横向多列响应式布局效果
日期:2013-1-26 来源:GBin1.com 在线演示还记得上周介绍的一个超酷的星际争霸2视差滚动效果吧,如果你希望生成一个类似ipad效果的漂亮横向多列响应式滚动效果的话,那么你可以考虑使 ...
使用jQuery开发一个超酷的倒计时效果
转自:http://www.gbtags.com/technology/jquerytutorial/20110105countdownjquery/ 使用jQuery开发一个超酷的倒计时效果日期: ...
form 表单 + HTML5(FileReader) +iframe 实现无刷新图片上传+图片预览效果
作为一个初入前端的菜鸟,最近因为一个无刷新上传图片问题走了很多弯路,所以在这里给大家分享一下,不足之处希望谅解.无刷新上传图片一般有两种方式,一种是 form 表单+iframe ,还有一种是 aja ...
上传图片显示扫描效果html5,JS+HTML5实现上传图片预览效果完整实例【测试可用】...
本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件 ...
基于 vue 编写的vue图片预览组件，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果，可自定义背景、按钮颜色等
hevue-img-preview 简介完整版下载地址:基于 vue 编写的vue图片预览组件本组件是一个基于 vue 编写的 vue 图片预览组件,支持 pc 和手机端,支持单图和多图预览,仅传 ...

使用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果

使用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果相关推荐

最新文章

热门文章