Home > Web Front-end > JS Tutorial > Stunning jquery-like flash navigation bar effects_jquery

Stunning jquery-like flash navigation bar effects_jquery

WBOY
Release: 2016-05-16 16:31:35
Original
1509 people have browsed it

FLASH navigation is basically outdated now, but we can use jQuery to achieve flash effects, which is very good.

Demo address: http://demo.jb51.net/js/2014/jqeryfangflashdh/demo.html

Copy code The code is as follows:




demo01





                                                                                                                                                                                                                                                                                                                                                  & Lt; span & gt; test & lt;/span & gt;
                                                                                                                                                                                                                                                                                                                                 & Lt; span & gt; test & lt;/span & gt;
                                                                                                                                                                                                                                                                                                                                 & Lt; span & gt; test & lt;/span & gt;
                                                                                                                                                                                                                                                                                                                                    & Lt; span & gt; test & lt;/span & gt;
                                                                                                                                                                                                                                                                                                                              & Lt; span & gt; test & lt;/span & gt;
                                                                                                                                                                                                                                                                                                                              & Lt; span & gt; test & lt;/span & gt;
                                                                                                                                                                                   








Copy code


The code is as follows:

$(document).ready(function(){
$(".menu").mouseover(function(){
      var div = $(this).children(".menu_b");  
        var span = $(this).children("span");  
//Hide font, move 20px to the right
        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 20px to the left
        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 20px to the left
        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 20px to the right
        span.animate({opacity:'1',left:'0px'},300);
        span.css({color:'#777'});
});
});

I wrote the animation effects according to my own preferences. You can change the special effects yourself if you like. .

Copy code The code is as follows:

/* 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;
}

The code is very simple, and it is also very simple to use, including modifications. You can figure it out by yourself

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template