jquery-仿flash的一个导航栏特效

时间：2022-02-11 02:04:47

演示地址：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类库的使用,代码重复的比较多需要完善.严格区分大小写,在 $(&quot ...

  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. Jquery表单序列化和AJAX全局事件

    Jquery表单序列化 1.必须放在form标签内: 2.控件必须有name属性: 3.控件的value值会提交到服务器: 如: <form id="form1"> & ...

  2. HTML5&lbrack;6&rsqb;：多行文本显示省略号

    CSS3新增text-overflow: ellipse; 只支持单行文本 如果是多行文本, 在无法完全显示的情况下,可以按下面这样写: overflow:hidden; display: -webk ...

  3. mysql grant all on &ast;&period;&ast; to xxx&commat;&&num;39&semi;&percnt;&&num;39&semi; 报Access denied for user &&num;39&semi;root&&num;39&semi;&commat;&&num;39&semi;localhost&&num;39&semi;

    今日,开发反馈某台mysql服务器无法登陆,解决之后,远程登录后发现用户只能看到information_schema,其他均看不到. 故登录服务器执行: mysql> grant all on ...

  4. Swift中简单的单例设计

    import Foundation class Test: NSObject { // 提供单例实例 static let shareInstance = Test() // 私有化构造方法 over ...

  5. AlwaysON同步过程

    <SQL Server 2012实施与管理实战指南>中指AlwaysON同步过程如下: 任何一个SQL Server里都有个叫Log Writer的线程,当任何一个SQL用户提交一个数据修 ...

  6. git 如何让单个文件回退到指定的版本

    1.进入到文件所在文件目录,或者能找到文件的路径查看文件的修改记录 1 $ git log MainActivity.java 结果: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  7. java集合的三种遍历方式

    import java.util.ArrayList;  import java.util.Collection;import java.util.Iterator;public class Home ...

  8. &lbrack;转&rsqb;数据对齐对CPU的影响

    [转]http://www.cnblogs.com/wuzhenbo/archive/2012/06/05/2537465.html 1.前言 在IBM开发社区上发现一篇叫'Data alignmen ...

  9. openLayers 4 canvas图例绘制，canvas循环添加图片，解决图片闪烁问题

    一.问题来源: 接触Openlayers 一段时间了,最近做了一个农业产业系统,项目中涉及到产业图例,最后考虑用canvas来绘制图例图像.当中带图片的图例移动时,图片会实现闪烁留白情况.闪烁是因为绘 ...

  10. Java虚拟机15：运行期优化

    前言 HotSpot采用的是解释器+编译器并存的架构,之前的这篇文章里面已经讲过了,本文只是把即时编译器这块再讲得具体一点而已.当然,其实本文的内容也没多大意义,90%都是概念上的东西,对于实际开发. ...

相关文章