演示地址：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. 懒人习惯之ButterKnife Zelezny

    项目地址:https://github.com/avast/android-butterknife-zelezny   这个是Android Studio的插件. 其实就间接帮你把LoadView的过 ...

  2. 关于Eclipse如何加入Gradle文件与Android Studio两个平台一起开发，工作目录不发生变化

    前言: 本来很久之前想弄这玩意,不过因为各种原因,所以没弄. 今天有位前辈提出需求.说想让Eclipse的Android项目逐步走向Android Studio,但是又担心Android Studio ...

  3. activiti工作流之Eclipse的Eclipse BPMN 2.0 Designer无法安装或者(安装后无法重复打开*.bpmn)

    1.首先.既然学习activiti工作流,连官网和相应文件都没有下载就说不过去了 这是官网下载:http://www.activiti.org/download.html 2.对于下载后的activi ...

  4. Java常考面试题(一)

    序言 我是一只乱飞乱撞的菜鸟,写的文章目前是以记录自己学习,和方便以后查看,期待日后不久能通过自己的努力,获得一点小小的成功,然后写出我的学习经验总结性文章来. ---WH 一.什么是虚拟机?为什么J ...

  5. 【Unity】第11章 第三人称角色控制器和碰撞体

    分类:Unity.C#.VS2015 创建日期:2016-05-02 一.简介 第三人称视角控制器涉及的相关概念有: 1.刚体(Rigidbody). 2.碰撞体(Collider).包括球体碰撞体( ...

  6. （UML总结三）UML与软件project

    学习完UML.我们要把它和之前的软件project结合起来.软件project是从总体的角度说了软件开发的步骤.保证了所开发软件的质量.而UML作为一种统一建模语言.是用来设计软件蓝图的可视化建模语言 ...

  7. IBAction:IBOutlet:注意事项

    1.IBAction: 1> 能保证方法能够连线 > 相当于void 2.IBOutlet: 1> 能保证属性能够连线 3.常见错误 setValue:forUndefinedKey ...

  8. .NET MVC+ EF+调用存储过程 多表联查以及VIEW列表显示

    直接上干活,至于网上的一大堆处理方式不予评论,做好自己的就是最好的,供大家不走弯路 1.view页面 <link href="~/Content/bootstrap.css" ...

  9. c--日期和时间函数

    C的标准库<time.h>包含了一些处理时间与日期的函数. 1.clock_t clock(void); 函数返回程序自开始执行后的处理器时间,类型是clock_t,单位是tick.如果有 ...

  10. COMPILING ACTIONSCRIPT 3.0 WITH SUBLIME TEXT 2

    At Clock we typically spend our time developing JavaScript and PHP, however, occasionally Flash pres ...