演示地址：http://itxiaoming.sinaapp.com/demo05/demo.html

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  4. <title>demo01</title>
  5. <link rel="stylesheet" type="text/css" href="demo.css">
  6. <script type="text/javascript" src="jquery.js"></script>
  7. <script type="text/javascript" src="demo.js"></script>
  8. </head>
  9. <body>
  10. <div id="main">
  11. <div class="menu">
  12. <div class="menu_b back1"></div>
  13. <span>测试</span>
  14. </div>
  15. <div class="menu">
  16. <div class="menu_b back2"></div>
  17. <span>测试</span>
  18. </div>
  19. <div class="menu">
  20. <div class="menu_b back3"></div>
  21. <span>测试</span>
  22. </div>
  23. <div class="menu">
  24. <div class="menu_b back4"></div>
  25. <span>测试</span>
  26. </div>
  27. <div class="menu">
  28. <div class="menu_b back5"></div>
  29. <span>测试</span>
  30. </div>
  31. <div class="menu">
  32. <div class="menu_b back6"></div>
  33. <span>测试</span>
  34. </div>
  35. </div>
  36. </body>
  37. </html>
  1. $(document).ready(function(){
  2. $(".menu").mouseover(function(){
  3. var div = $(this).children(".menu_b");
  4. var span = $(this).children("span");
  5. //隐藏字体，往右移动20px
  6. span.stop(true,false).animate({opacity:'0',left:'20px'},200);
  7. //显示背景动画
  8. div.stop(true,false).animate({width:'100px',marginLeft:'-50px',height:'1px',opacity:'1'},300);
  9. div.animate({height:'40px',marginTop:'-20px',opacity:'1'},300);
  10. //显示字体，往左移动20px
  11. span.animate({opacity:'1',left:'0px'},300);
  12. span.css({color:'#FFF'});
  13. });
  14. $(".menu").mouseout(function(){
  15. var div = $(this).children(".menu_b");
  16. var span = $(this).children("span");
  17. //隐藏字体，往左移动20px
  18. span.stop(true,false).animate({opacity:'0',left:'20px'},200);
  19. //显示背景动画
  20. div.stop(true,false).animate({height:'1px',marginTop:'0px',opacity:'1'},300);
  21. div.animate({width:'0px',marginLeft:'0px',opacity:'1'},300);
  22. //显示字体，往右移动20px
  23. span.animate({opacity:'1',left:'0px'},300);
  24. span.css({color:'#777'});
  25. });
  26. });

动画效果是我根据自己的喜好来写的，喜欢的可以自己更改特效。。

  1. /* demo01 css */
  2. #main{
  3. background: #EEE;
  4. display: inline-block;
  5. padding: 10px;
  6. }
  7. .menu{position: relative;
  8. width: 100px;
  9. height: 40px;
  10. margin: 10px auto;
  11. }
  12. .menu_b{
  13. position: absolute;
  14. width: 0px;
  15. height: 0px;
  16. background: red;
  17. z-index: 1px;
  18. top: 50%;
  19. left: 50%;
  20. }
  21. .menu span{
  22. position: inherit;
  23. display: block;
  24. text-align: center;
  25. line-height: 40px;
  26. z-index: 3px;
  27. font-size: 14px;
  28. font-family: "Microsoft Yahei";
  29. color: #777;
  30. cursor: pointer;
  31. }
  32. .back1{
  33. background: #FF0000;
  34. }
  35. .back2{
  36. background: #921AFF;
  37. }
  38. .back3{
  39. background: #00CACA;
  40. }
  41. .back4{
  42. background: #00DB00;
  43. }
  44. .back5{
  45. background: #FF5809;
  46. }
  47. .back6{
  48. background: #E1E100;
  49. }

jquery-仿flash的一个导航栏特效的更多相关文章

  1. 用Jquery 仿VS 样式的 导航栏插件

    在开发B/S 项目过程中,根据主界面设计要求,需要做一个类似VS 左边工具栏样式的菜单导航栏,在网上搜索无果后,于是决定自已做一个. 由于前台用JQuery开发, 想到网上很多人用JQuery做插件, ...

  2. 仿酒仙网的一款jQuery侧栏弹出导航栏特效

    仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...

  3. 利用JQ实现的，高仿 彩虹岛官网导航栏（学习HTML过程中的小记录）

    利用JQ实现的,高仿 彩虹岛官网导航栏(学习HTML过程中的小记录)   作者:王可利(Star·星星) 总结: 今天学习的jQ类库的使用,代码重复的比较多需要完善.严格区分大小写,在 $(" ...

  4. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

  5. 基于jQuery仿Flash横向切换焦点图

    给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...

  6. 使用TabLayout快速实现一个导航栏

    在没有Material Design的年代,要实现一个类似微信主页面的效果,我们有以下几种解决方案: 1.Fragment + ViewPager  +  RadioGroup自定义固定导航条 2.F ...

  7. 如何做一个导航栏————浮动跟伪类（hover）事件的应用

    我们先说一下伪类选择器的写法: 写法:选择器名称:伪类状态{}4 常见伪类状态: 未访问:link 鼠标移上去:hover 激活选定:active 已访问:visited 获得焦点的时候触发:focu ...

  8. 基于jQuery仿迅雷影音官网幻灯片特效

    分享一款基于jQuery仿迅雷影音官网幻灯片特效迅.雷影音官网jQuery幻灯片特效是一款带左右箭头,索引按钮切换的jQuery幻灯片代码.效果图如下: 在线预览   源码下载 实现的代码. html ...

  9. jquery仿天猫商城左侧导航菜单

    之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...

随机推荐

  1. struts2：JSON在struts中的应用（JSP页面中将对象转换为JSON字符串提交、JSP页面中获取后台Response返回的JSON对象）

    JSON主要创建如下两种数据对象: 由JSON格式字符串创建,转换成JavaScript的Object对象: 由JSON格式字符串创建,转换成JavaScript的List或数组链表对象. 更多关于J ...

  2. x86-64整数寄存器

  3. 菜鸟学Java（七）——Ajax+Servlet实现无刷新下拉联动

    下拉联动的功能可以说非常的常用,例如在选择省.市等信息的时候:或者在选择大类.小类的时候.总之,下拉联动很常用.今天就跟大家分享一个简单的二级下拉联动的功能. 大类下拉框:页面加载的时候就初始化大类的 ...

  4. [CoreOS 转载]CoreOS实践指南（二）：架设CoreOS集群

    转载:http://www.csdn.net/article/2015-01-04/2823399 摘要:CoreOS是一个采用了高度精简的系统内核及外围定制的操作系统.ThoughtWorks的软件 ...

  5. 关于 android receiver

    可以在代码文件中声明一个receiver,也可以在manifest中声明一个,前者中的receiver只有在该activity launch起来以后才会监听其所感兴趣的事件,而如果在androidMa ...

  6. 模拟 SQLSERVER 死锁

    环境: sqlserver 2008   事务(进程 ID (n))与另一个进程被死锁在锁资源上,并且已被选作死锁牺牲品.请重新运行   死锁原理: 如两个任务 任务1,已经锁定R1,再进行请求R2& ...

  7. Tensorflow网址

    https://morvanzhou.github.io/tutorials/machine-learning/tensorflow/1-1-why/ 莫烦视频学习 http://wiki.jikex ...

  8. 理解Netty中的零拷贝（Zero-Copy）机制【转】

    理解零拷贝 零拷贝是Netty的重要特性之一,而究竟什么是零拷贝呢? WIKI中对其有如下定义: “Zero-copy” describes computer operations in which ...

  9. User-Defined-Literal自定义字面量

    c++支持多种内置类型的字面量,比如: 123u // unsigned int 1.0 // double 1.6f // float 'a' // char 4ULL // unsigned lo ...

  10. Makefile常用万能模板（包括静态链接库、动态链接库、可执行文件）

    本文把makefile 分成了三份:生成可执行文件的makefile,生成静态链接库的makefile,生成动态链接库的makefile. 这些makefile都很简单,一般都是一看就会用,用法也很容 ...