演示地址：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. iOS安全攻防（十八）：数据保护API

    数据保护API 题外话 开篇先扯几句题外话,许多朋友都问我怎么不写防啊,我确实有点犹豫.hackers总是想象如果自己是开发者会怎么写,然后才能找到入手点.同理,开发者们也要想象自己是hackers会 ...

  2. [svc][jk]磁盘的iops和吞吐量(Throught)指标

    参考 另参考 IOPS (Input/Output Per Second)即每秒的输入输出量(或读写次数),是衡量磁盘性能的主要指标之一.IOPS是指单位时间内系统能处理的I/O请求数量,一般以每秒处 ...

  3. 并发编程 – Concurrent 用户指南--转

    1. java.util.concurrent – Java 并发工具包 Java 5 添加了一个新的包到 Java 平台,java.util.concurrent 包.这个包包含有一系列能够让 Ja ...

  4. FLINK 案例分析

    基于Flink流处理的动态实时超大规模用户行为分析 https://zhuanlan.zhihu.com/p/31548501 基于Flink流处理的动态实时超大规模用户行为分析 https://zh ...

  5. [SQL in Azure] Getting Started with SQL Server in Azure Virtual Machines

    This topic provides guidelines on how to sign up for SQL Server on a Azure virtual machine and how t ...

  6. (原)docker的一个“Driver aufs failed to remove...”问题的解决

    1.  /var/lib/docker/aufs/mnt下的目录不能乱删! /var/lib/docker/aufs/diff下的目录删了就死了!!!!!2. 尽量不要用docker tag -f 这 ...

  7. 使用Python实现Map Reduce程序

    使用Python实现Map Reduce程序 起因 想处理一些较大的文件,单机运行效率太低,多线程也达不到要求,最终采用了集群的处理方式. 详细的讨论可以在v2ex上看一下. 步骤 MapReduce ...

  8. VMware文章总结

    Vmware Vsphere6.5 + Vcenter6.5安装简介:http://www.ctoclubs.com/?p=296 安装VCSA6.5(vCenter Server Appliance ...

  9. Python（七）之OS模块

    文件系统功能:os模块 python编程时,经常和文件.目录打交道,这是就离不了os模块.os模块包含普遍的操作系统功能,与具体的平台无关.以下列举常用的命令: 目录: os.mkdir('/tmp/ ...

  10. java 多线程 28 ： 多线程组件之 Semaphore 信号量

    Semaphore是非常有用的一个组件,它相当于是一个并发控制器,是用于管理信号量的.构造的时候传入可供管理的信号量的数值,这个数值就是控制并发数量的,就是同时能几个线程访问.我们需要控制并发的代码, ...