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

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

    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>  
    Js代码  收藏代码
    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({'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.   
    15.     $(".menu").mouseout(function(){  
    16.         var div = $(this).children(".menu_b");  
    17.         var span = $(this).children("span");  
    18.         //隐藏字体，往左移动20px  
    19.         span.stop(true,false).animate({opacity:'0',left:'20px'},200);  
    20.         //显示背景动画  
    21.         div.stop(true,false).animate({height:'1px',marginTop:'0px',opacity:'1'},300);  
    22.         div.animate({'0px',marginLeft:'0px',opacity:'1'},300);  
    23.         //显示字体，往右移动20px  
    24.         span.animate({opacity:'1',left:'0px'},300);  
    25.         span.css({color:'#777'});  
    26.     });  
    27. });  

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

    Css代码  收藏代码
    1. /* demo01 css */  
    2. #main{  
    3.     background: #EEE;  
    4.     display: inline-block;  
    5.     padding: 10px;  
    6. }  
    7. .menu{position: relative;  
    8.      100px;  
    9.     height: 40px;  
    10.     margin: 10px auto;  
    11. }  
    12.   
    13. .menu_b{  
    14.     position: absolute;  
    15.      0px;  
    16.     height: 0px;  
    17.     background: red;  
    18.     z-index: 1px;  
    19.     top: 50%;  
    20.     left: 50%;  
    21. }  
    22. .menu span{  
    23.     position: inherit;  
    24.     display: block;  
    25.     text-align: center;  
    26.     line-height: 40px;  
    27.     z-index: 3px;  
    28.     font-size: 14px;  
    29.     font-family: "Microsoft Yahei";  
    30.     color: #777;  
    31.     cursor: pointer;  
    32. }  
    33. .back1{  
    34.     background: #FF0000;  
    35. }  
    36. .back2{  
    37.     background: #921AFF;  
    38. }  
    39. .back3{  
    40.     background: #00CACA;  
    41. }  
    42. .back4{  
    43.     background: #00DB00;  
    44. }  
    45. .back5{  
    46.     background: #FF5809;  
    47. }  
    48. .back6{  
    49.     background: #E1E100;  
    50. }  
  • 相关阅读:
    大数据之路week06--day07（Linux中的mysql的离线安装）
    大数据之路week06--day07（Hadoop生态圈的介绍）
    大数据之路week06--day07（Hadoop常用命令）
    大数据之路week06--day07（完全分布式Hadoop的搭建）
    大数据之路week06--day07（虚拟机的克隆）
    大数据之路week06--day03（jdk8新特性 Lambda表达式）
    解决CentOS虚拟机开机黑屏卡死问题
    poj 1562 Oil Deposits （广搜，简单）
    poj 3278 Catch That Cow （广搜，简单）
    hdu 1195 Open the Lock（广搜，简单）
  • 原文地址：https://www.cnblogs.com/xiaochao12345/p/4079127.html
Copyright © 2020-2023  润新知