演示地址：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. PhotoShop CS6实现照片背景虚化效果

    在摄影实践中,虚化背景是突出主体的常用手段.但是由于消费级DC镜头的实际焦距都很短,因此实现浅景深而虚化背景的难度较大.如果我们希望用消费级DC也能达到虚化背景突出主体的效果,那么,Photoshop ...

  2. Android设计元素-操作栏

    原文链接:http://android.eoe.cn/topic/android_sdk 操作栏 - Action Bar “操作栏”对于 Android 应用来说是最重要的设计元素.它通常在应用运行 ...

  3. eclipse 运行 emulator时，PANIC:Could not open emulator 的解决办法

    使用eclipse启动emulator的时候,出现PANIC:Could not open emulator,模拟器无法正常的运行. 经过搜索得知,因为我的SDK的环境变量出问题,需要重新配置下环境变 ...

  4. 检查本机显卡的cuda信息及适配cuda-sdk版本

    1.按照本机显卡的最新版本,一般用驱动精灵安装,省事. 2.右击桌面->nvidia控制版本->"帮助"->"系统信息“ 3.这里有”显示“,主要记录了 ...

  5. Atitit spring 3.0 3.1 3.2 4.0 4.3 5.0 新特性

    Atitit spring 3.0 3.1 3.2 4.0 4.3 5.0 新特性 Spring3.0的新特性及其分析 - 我的人生不甘于平庸! - ITeye技术网站.html Spring3.0带 ...

  6. 用casperjs模拟登录，支持多个账户登录

    var casper = require('casper').create({ viewportSize:{ width:1920, height:1080 } }); var url1 = 'htt ...

  7. lua -- 点击关闭窗口中的子界面

    function UIBagController:initBoxView( ) self.panelBox = tolua.cast(UIHelper:seekWidgetByName(self.ow ...

  8. Java 虚拟机类加载器

    虚拟机设计团队把类加载阶段张的”通过一个类的全限定名来获取此类的二进制字节流”这个动作放到Java虚拟机外部去实现,以便让应用程序自己决定如何去获取所需要的类.实现这个动作的代码模块称为”类加载器”. ...

  9. Capterra Software Categories

    https://www.capterra.com/categories this software categories is valuable.

  10. Beginning SDL 2.0(4) YUV加载及渲染

    本文主要内容是基于的“Beginning SDL 2.0(3) SDL介绍及BMP渲染”(以下简称BS3)基础上,将BMP加载及渲染修改为YUV420或I420的原始视频格式.阅读完本部分内容相信你可 ...