麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 學院 > 開發(fā)設(shè)計 > 正文

jquery-仿flash的一個導(dǎo)航欄特效

2019-11-14 17:31:14
字體：大 中 小
供稿：網(wǎng)友

演示地址：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({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.   
  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({width:'0px',marginLeft:'0px',opacity:'1'},300);  
  23.         //顯示字體，往右移動20px  
  24.         span.animate({opacity:'1',left:'0px'},300);  
  25.         span.css({color:'#777'});  
  26.     });  
  27. });  

 動畫效果是我根據(jù)自己的喜好來寫的，喜歡的可以自己更改特效。。

 

Css代碼  收藏代碼
  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.   
  13. .menu_b{  
  14.     position: absolute;  
  15.     width: 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. }  

 

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板： 成人免费乱码大片a毛片视频网站 | 黄色片快播 | 一级免费毛片 | 亚洲片在线观看 | 成人短视频在线观看 | 久草视频2 | 亚洲精品一区二区三区在线看 | 欧美毛片免费观看 | 特级西西444www大精品视频免费看 | 色婷婷久久久久久 | 久久久久久久久亚洲精品 | 欧美偷拍一区二区 | 毛片免费观看完整版 | 中文字幕亚洲视频 | 一级一级一级一级毛片 | 久久亚洲精品久久国产一区二区 | 黄色小视频在线免费看 | 久久午夜神器 | 色啪综合 | 国产免费视频一区二区裸体 | 黄色免费在线电影 | 欧美精品一区二区久久久 | 亚洲小视频在线播放 | 宅男噜噜噜66一区二区 | 久久2019中文字幕 | www国产成人免费观看视频,深夜成人网 | 欧美国产一级片 | 二区三区四区 | 天天操很很操 | 精品久久久久久久久久久久包黑料 | 成人精品久久 | 一级毛片电影院 | 国产精品视频免费在线观看 | 久久精品国产99国产精品澳门 | 毛片免费视频播放 | 精品一区二区亚洲 | 免费看国产| 成人免费看视频 | 九九热在线视频观看 | 国产精品久久久久无码av | 久久国产中文 |