今天继续给大家介绍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="images/scv.gif" alt="Terran unit" /></li> <li data-tag="probe"><img src="images/probe.gif" alt="Protoss unit" /></li> <li data-tag="larva"><img src="images/larva.gif" alt="Zerg unit" /></li> <li data-tag="marine"><img src="images/marine.gif" alt="Terran unit" /></li> <li data-tag="zealot"><img src="images/zealot.gif" alt="Protoss unit" /></li> <li data-tag="zergling"><img src="images/zergling.gif" alt="Zerg unit" /></li> <li data-tag="battlecruiser"><img src="images/battlecruiser.gif" alt="Terran unit" /></li> <li data-tag="mothership"><img src="images/mothership.gif" alt="Protoss unit" /></li> <li data-tag="mutalisk"><img src="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="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图片,这里我们使用单行图片,如下:
在你的Reel配置选项你,你需要制定如下:
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; }
全部代码完成。 请大家留言多提宝贵意见, 谢谢!