Demo Address: http://itxiaoming.sinaapp.com/demo05/demo.html
HTML code
- <html>
- <head>
- <meta http-equiv= "content-type" content="Text/html;charset=utf-8">
- <title>demo01</title>
- <link rel="stylesheet" type="text/css" href= "demo.css">
- <script type="Text/javascript" src="Jquery.js"></script>
- <script type="Text/javascript" src="Demo.js"></script >
- </head>
- <body>
- <div id="main">
- <div class="menu">
- <div class="Menu_b back1"></div>
- <span> Test </span>
- </div>
- <div class="menu">
- <div class="Menu_b back2"></div>
- <span> Test </span>
- </div>
- <div class="menu">
- <div class="Menu_b back3"></div>
- <span> Test </span>
- </div>
- <div class="menu">
- <div class="Menu_b back4"></div>
- <span> Test </span>
- </div>
- <div class="menu">
- <div class="Menu_b back5"></div>
- <span> Test </span>
- </div>
- <div class="menu">
- <div class="Menu_b back6"></div>
- <span> Test </span>
- </div>
- </div>
- </body>
- </html>
JS Code
- $ (document). Ready (function () {
- $ (". Menu"). MouseOver (function () {
- var div = $ (this). Children (". Menu_b");
- var span = $ (this). Children ("span");
- //Hide fonts, move to right 20px
- Span.stop (True,false). Animate ({opacity:' 0 ', left:' 20px '},200);
- //Show background animation
- Div.stop (True,false). Animate ({width:' 100px ', marginleft: '-50px ', Height:' 1px ', opacity:' 1 '},300);
- Div.animate ({height: '40px ', margintop:' -20px ', opacity:' 1 '},300);
- //Display font, move left 20px
- Span.animate ({opacity:' 1 ', left:' 0px '},300);
- Span.css ({color:' #FFF '});
- });
- $ (". Menu"). Mouseout (function () {
- var div = $ (this). Children (". Menu_b");
- var span = $ (this). Children ("span");
- //Hide font, move left 20px
- Span.stop (True,false). Animate ({opacity:' 0 ', left:' 20px '},200);
- //Show background animation
- Div.stop (True,false). Animate ({height:' 1px ', margintop: '0px ', opacity:' 1 '},300);
- Div.animate ({width: '0px ', marginleft:' 0px ', opacity:' 1 '},300);
- //Display font, move to right 20px
- Span.animate ({opacity:' 1 ', left:' 0px '},300);
- Span.css ({color:' #777 '});
- });
- });
The animation effect is I according to own liking to write, likes can change the special effect by oneself.
CSS Code
- /* demo01 CSS */
- #main {
- Background: #EEE;
- Display:inline-block;
- padding:10px;
- }
- . menu{position:relative;
- width:100px;
- height:40px;
- margin:10px Auto;
- }
- . menu_b{
- Position:absolute;
- width:0px;
- height:0px;
- background:red;
- z-index:1px;
- Top: 50%;
- Left: 50%;
- }
- . Menu span{
- Position:inherit;
- Display:block;
- Text-align:center;
- line-height:40px;
- z-index:3px;
- font-size:14px;
- Font-family: "Microsoft Yahei";
- Color: #777;
- Cursor:pointer;
- }
- . back1{
- Background: #FF0000;
- }
- . back2{
- Background: #921AFF;
- }
- . back3{
- Background: #00CACA;
- }
- . back4{
- Background: #00DB00;
- }
- . back5{
- Background: #FF5809;
- }
- . back6{
- Background: #E1E100;
- }
jquery-a navigation bar effect for flash simulation