jQuery简单实现Flash动画效果

现在每天开启电脑上网，基本上每次都要使用Google搜索服务。我们看到Google.com首页页面非常简洁，让人百看不厌；而谷歌中国(确切地说是Google香港的中文简体版)首页也只是在搜索框下面多了一排Google 视频/地图等其他Google产品服务的导航链接，当我们用鼠标划过或指向到某个导航栏目时，这个导航项目上方将会渐显地飘出一行浮动的说明文字，鼠标离开时说明文字渐渐隐去。

jQuery实现Google 首页flash动画效果

这是怎么实现的? Google首页使用了纯js来实现flash动画效果。有时候使用JavaScript脚本就可以实现很多类似flash的动画效果，不过用纯js来实现flash的动画效果是比较费劲的，比如频繁调用setTimeout()和setInterval()函数等等。

实际上我们可以直接应用许多优秀的js库中的动画组件(插件)，比如现在流行的jquery框架，就可以用很简洁的脚本代码，来高效地实现页面的flash动画效果。今天刚好在35UI博客上看到一篇文章介绍了如何使用jquery来实现类似google首页这种简单的flash动画效果，这里远方博客也拿过来演示一下。

在这里jQuery要实现的动画效果就是，当鼠标移动到某个导航项上时，渐显地飘出带有说明文字的浮动框，并将前一个导航项的说明文字渐隐。下面我们依次看看HTML代码、CSS样式和jQuery脚本，制作出这个动画效果。

1. HTML结构结构代码如下：


 <div class="strongfunc" id="FuncDiv">
<ul>
<li class="funcfirst">
<div class="funcimg">
<a href="http://farlee.info/cat/se"><img src="wp-contents/images/farlee_cat_se.png" alt="搜索引擎.SE" /></a>
</div>
<span class="functxt"><a href="http://farlee.info/cat/se">搜索引擎</a></span>
<div class="floatinfo" style="left:-22px"><p><span>搜索引擎优化SEO,搜索引擎研究,搜索引擎动态...</span></p></div>
</li>
<li>
<div class="funcimg">
<a href="http://farlee.info/cat/web"><img src="wp-contents/images/farlee_cat_web.png" alt="编程开发.web" /></a>
</div>
<span class="functxt"><a href="http://farlee.info/cat/web">编程开发</a></span>
<div class="floatinfo" style="left:-38px"><p><span>Web编程,后台程序设计,PHP,JSP,ASP, Zend, WordPress</span></p></div>
</li>
<li>
<div class="funcimg">
<a href="http://farlee.info/cat/design"><img src="wp-contents/images/farlee_cat_ui.png" alt="前端设计.UI" /></a>
</div>
<span class="functxt"><a href="http://farlee.info/cat/design">前端设计</a></span>
<div class="floatinfo" style="left:-32px"><p><span>Web前端开发,网站建设,网页设计. html.css.js, ajax, jquery, dw, ps</span></p></div>
</li>
<li>
 <div class="funcimg">
 <a href="http://farlee.info/cat/hostdomain"><img src="wp-contents/images/farlee_cat_host.png" alt="域名主机.host" /></a>
 </div>
 <span class="functxt"><a href="http://farlee.info/cat/hostdomain">域名主机</a></span>
 <div class="floatinfo" style="left:-22px"><p><span>虚拟主机,VPS,服务器技术,域名DNS,注册备案</span></p></div>
 </li>
 <li>
 <div class="funcimg">
 <a href="http://farlee.info/cat/net"><img src="wp-contents/images/farlee_cat_net.png" alt="互联网络.net" /></a>
 </div>
 <span class="functxt"><a href="http://farlee.info/cat/net">互联网络</a></span>
 <div class="floatinfo" style="left:-22px"><p><span>互联网动态,电子商务,网络安全,Web2.0</span></p></div>
 </li>
 <li>
 <div class="funcimg">
 <a href="http://farlee.info/cat/it"><img src="wp-contents/images/farlee_cat_it.png" alt="通讯数码.IT" /></a>
 </div>
 <span class="functxt"><a href="http://farlee.info/cat/it">通讯数码</a></span>
 <div class="floatinfo" style="left:-22px"><p><span>IT业界,移动通讯,数码影像</span></p></div>
 </li>
 <li>
 <div class="funcimg">
 <a href="http://farlee.info/cat/marketing"><img src="wp-contents/images/farlee_cat_em.png" alt="网络营销" /></a>
 </div>
 <span class="functxt"><a href="http://farlee.info/cat/marketing">网络营销</a></span>
 <div class="floatinfo" style="left:-12px"><p><span>网络营销策划,案例,博客营销,网络广告,网站推广运营</span></p></div>
 </li>
 <li>
 <div class="funcimg">
 <a href="http://farlee.info/cat/pc"><img src="wp-contents/images/farlee_cat_pc.png" alt="电脑百科.PC" /></a>
 </div>
 <span class="functxt"><a href="http://farlee.info/cat/pc">电脑百科</a></span>
 <div class="floatinfo" style="left:-2px"><p><span>电脑知识,疑难杂症,尽找百科</span></p></div>
 </li>
 <li>
 <div class="funcimg">
 <a href="http://farlee.info/cat/far"><img src="wp-contents/images/farlee_cat_far.png" alt="生活笔迹.FAR" /></a>
 </div>
 <span class="functxt"><a href="http://farlee.info/cat/far">生活笔迹</a></span>
 <div class="floatinfo" style="left:-8px"><p><span>记录生活感悟,时间曲线</span></p></div>
 </li>
 </ul>
 </div>

上面HTML结构代码中，根据各个导航栏目说明文字的长短来分别确定其内联样式的CSS属性，用的是绝对定位。

2. 兼容主流浏览器的CSS样式：


 <style type="text/css">
 body{ font:12px Arial, Helvetica, sans-serif;}
 a{ color:#5d5d5d; text-decoration:none;}
 .strongfunc{ position:relative; zoom:1;}
 .strongfunc ul{ margin:40px 0 0 80px; zoom:1; list-style:none;}

.strongfunc li{ position:relative; float:left; width:70px; height:75px; padding-left:9px; background:url(wp-contents/images/ico_point.png) no-repeat left 27px; text-align:center;}

 .strongfunc .funcfirst{ padding:0; background:none;}
 .funcimg{ position:relative;}
 .funcimg a{ display:table-cell; vertical-align:middle; width:70px; height:60px; line-height:60px; *display:block; *font-size:45px;}
 .funcimg a img{ vertical-align:middle; border:0;}
 .functxt{ white-space:nowrap;}
 .floatinfo,.floatinfo p,.floatinfo p span{ background:url(images/float_bg.png) no-repeat; line-height:23px;}
 .floatinfo{ display:none; position:absolute; bottom:60px; white-space:nowrap; background-position:0 -7px;}
 .floatinfo p{ margin:0; padding:0; margin-left:12px; padding-right:12px; background-position:right -7px;}
 .floatinfo p span{ display:block; background-position:center 22px; height:29px;}
 </style>

3. 添加jquery脚本实现flash动画效果：


$(document).ready(function(){
//缓存外层容器及动画列表项的jQuery包装集
var funcdiv = $("#FuncDiv"),actAreas = funcdiv.find("li");
//给动画列表项增加鼠标移入事件
actAreas.hover(function() {showFloat($(this));}, function(){});
function showFloat(actArea){ //定义显示提示信息动画的方法
var floatdiv = actArea.find("div.floatinfo");  //获取当前提示信息
var curfloat = $.data(funcdiv,"curfloat");  //获取上一次鼠标移入时弹出的提示信息
if(curfloat){
if(curfloat[0] == floatdiv[0]) return;
curfloat.stop()
 .animate({opacity:0,bottom:"60px"},200);  //如果已经有信息显示并且不是当前鼠标处的这一条，就用动画使它渐隐
 }
 $.data(funcdiv,"curfloat",floatdiv);  //标记当前提示信息
 floatdiv.stop()
 .css({opacity:0,display:"block"})
 .animate({opacity:1,bottom:"70px"},200);  //用动画使当前鼠标处的信息渐显
 }
 showFloat(actAreas.eq(0));  //页面加载完成后默认显示第一项信息
 });