jQuery简单实现Flash动画效果

作者 FarLee 2010年4月4日 15:04:55   ‖浏览(22,577)

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

Google 首页flash动画效果

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结构结构代码如下:

  1. <div class="strongfunc" id="FuncDiv">
  2. <ul>
  3. <li class="funcfirst">
  4. <div class="funcimg">
  5. <a href="http://h.farll.com/cat/se"><img src="wp-contents/images/farlee_cat_se.png" alt="搜索引擎.SE" /></a>
  6. </div>
  7. <span class="functxt"><a href="http://h.farll.com/cat/se">搜索引擎</a></span>
  8. <div class="floatinfo" style="left:-22px"><p><span>搜索引擎优化SEO,搜索引擎研究,搜索引擎动态...</span></p></div>
  9. </li>
  10. <li>
  11. <div class="funcimg">
  12. <a href="http://h.farll.com/cat/web"><img src="wp-contents/images/farlee_cat_web.png" alt="编程开发.web" /></a>
  13. </div>
  14. <span class="functxt"><a href="http://h.farll.com/cat/web">编程开发</a></span>
  15. <div class="floatinfo" style="left:-38px"><p><span>Web编程,后台程序设计,PHP,JSP,ASP, Zend, WordPress</span></p></div>
  16. </li>
  17. <li>
  18. <div class="funcimg">
  19. <a href="http://h.farll.com/cat/design"><img src="wp-contents/images/farlee_cat_ui.png" alt="前端设计.UI" /></a>
  20. </div>
  21. <span class="functxt"><a href="http://h.farll.com/cat/design">前端设计</a></span>
  22. <div class="floatinfo" style="left:-32px"><p><span>Web前端开发,网站建设,网页设计. html.css.js, ajax, jquery, dw, ps</span></p></div>
  23. </li>
  24. <li>
  25. <div class="funcimg">
  26. <a href="http://h.farll.com/cat/hostdomain"><img src="wp-contents/images/farlee_cat_host.png" alt="域名主机.host" /></a>
  27. </div>
  28. <span class="functxt"><a href="http://h.farll.com/cat/hostdomain">域名主机</a></span>
  29. <div class="floatinfo" style="left:-22px"><p><span>虚拟主机,VPS,服务器技术,域名DNS,注册备案</span></p></div>
  30. </li>
  31. <li>
  32. <div class="funcimg">
  33. <a href="http://h.farll.com/cat/net"><img src="wp-contents/images/farlee_cat_net.png" alt="互联网络.net" /></a>
  34. </div>
  35. <span class="functxt"><a href="http://h.farll.com/cat/net">互联网络</a></span>
  36. <div class="floatinfo" style="left:-22px"><p><span>互联网动态,电子商务,网络安全,Web2.0</span></p></div>
  37. </li>
  38. <li>
  39. <div class="funcimg">
  40. <a href="http://h.farll.com/cat/it"><img src="wp-contents/images/farlee_cat_it.png" alt="通讯数码.IT" /></a>
  41. </div>
  42. <span class="functxt"><a href="http://h.farll.com/cat/it">通讯数码</a></span>
  43. <div class="floatinfo" style="left:-22px"><p><span>IT业界,移动通讯,数码影像</span></p></div>
  44. </li>
  45. <li>
  46. <div class="funcimg">
  47. <a href="http://h.farll.com/cat/marketing"><img src="wp-contents/images/farlee_cat_em.png" alt="网络营销" /></a>
  48. </div>
  49. <span class="functxt"><a href="http://h.farll.com/cat/marketing">网络营销</a></span>
  50. <div class="floatinfo" style="left:-12px"><p><span>网络营销策划,案例,博客营销,网络广告,网站推广运营</span></p></div>
  51. </li>
  52. <li>
  53. <div class="funcimg">
  54. <a href="http://h.farll.com/cat/pc"><img src="wp-contents/images/farlee_cat_pc.png" alt="电脑百科.PC" /></a>
  55. </div>
  56. <span class="functxt"><a href="http://h.farll.com/cat/pc">电脑百科</a></span>
  57. <div class="floatinfo" style="left:-2px"><p><span>电脑知识,疑难杂症,尽找百科</span></p></div>
  58. </li>
  59. <li>
  60. <div class="funcimg">
  61. <a href="http://h.farll.com/cat/far"><img src="wp-contents/images/farlee_cat_far.png" alt="生活笔迹.FAR" /></a>
  62. </div>
  63. <span class="functxt"><a href="http://h.farll.com/cat/far">生活笔迹</a></span>
  64. <div class="floatinfo" style="left:-8px"><p><span>记录生活感悟,时间曲线</span></p></div>
  65. </li>
  66. </ul>
  67. </div>

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

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

  1. <style type="text/css">
  2. body{ font:12px Arial, Helvetica, sans-serif;}
  3. a{ color:#5d5d5d; text-decoration:none;}
  4. .strongfunc{ position:relative; zoom:1;}
  5. .strongfunc ul{ margin:40px 0 0 80px; zoom:1; list-style:none;}
  6. .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;}
  7. .strongfunc .funcfirst{ padding:0; background:none;}
  8. .funcimg{ position:relative;}
  9. .funcimg a{ display:table-cell; vertical-align:middle; width:70px; height:60px; line-height:60px; *display:block; *font-size:45px;}
  10. .funcimg a img{ vertical-align:middle; border:0;}
  11. .functxt{ white-space:nowrap;}
  12. .floatinfo,.floatinfo p,.floatinfo p span{ background:url(images/float_bg.png) no-repeat; line-height:23px;}
  13. .floatinfo{ display:none; position:absolute; bottom:60px; white-space:nowrap; background-position:0 -7px;}
  14. .floatinfo p{ margin:0; padding:0; margin-left:12px; padding-right:12px; background-position:right -7px;}
  15. .floatinfo p span{ display:block; background-position:center 22px; height:29px;}
  16. </style>

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

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

上面用到了几个jquery函数,具体用法可以到这里查看:visualjquery.com。最后不要忘了将jQuery包上传:jQuery下载

最后的效果就像这样了:演示效果


“jQuery简单实现Flash动画效果”文章评论(6)

  1. 沙发顶顶~

  2. I just added your site to my blog roll, I hope you’ll look at doing the same.

Trackbacks/Pingbacks

  1. jquery实现tab切换效果及js css ajax推荐 - 远方博客
  2. jquery实现tab切换效果及js css ajax推荐 | 75号工坊
  3. jQuery简单实现Flash动画效果 | 75号工坊
  4. Turn: jquery realize TAB switching effect and js CSS ajax recommended

来说兩句