Superbe barre de navigation flash de type jquery effect_jquery

La navigation FLASH est désormais fondamentalement obsolète, mais nous pouvons utiliser jQuery pour obtenir des effets flash, ce qui est très bien.

Adresse de démonstration : http://demo.jb51.net/js/2014/jqeryfangflashdh/demo.html

Copier le code Le code est le suivant :

demo01                                                                                                                                                                                                                                                                                                                                           & Lt; span & gt; tester & lt;/span & gt;                                                                                                                                                                                                                                                                                                                          & Lt; span & gt; tester & lt;/span & gt;                                                                                                                                                                                                                                                                                                                          & Lt; span & gt; tester & lt;/span & gt;                                                                                                                                                                                                                                                                                                                             & Lt; span & gt; tester & lt;/span & gt;                                                                                                                                                                                                                                                                                                                       & Lt; span & gt; tester & lt;/span & gt;                                                                                                                                                                                                                                                                                                                       & Lt; span & gt; tester & lt;/span & gt;                                                                                                                                                                          






Copier le code


Le code est le suivant :

$(document).ready(function(){
$(".menu").mouseover(function(){
      var div = $(this).children(".menu_b");  
        var span = $(this).children("span");  
//Masquer la police, déplacer 20px vers la droite
        span.stop(true,false).animate({opacity:'0',left:'20px'},200); //Afficher l'animation d'arrière-plan
        div.stop(true,false).animate({width:'100px',marginLeft:'-50px',height:'1px',opacity:'1'},300
);       div.animate({hauteur : '40px', marginTop : '-20px', opacité : '1'},300
); //Afficher la police, déplacer 20px vers la gauche
        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");  
//Masquer la police, déplacer 20px vers la gauche
        span.stop(true,false).animate({opacity:'0',left:'20px'},200); //Afficher l'animation d'arrière-plan
        div.stop(true,false).animate({height:'1px',marginTop:'0px',opacity:'1'},300
);       div.animate({width:'0px',marginLeft:'0px',opacity:'1'},300
); //Afficher la police, déplacer 20px vers la droite
        span.animate({opacity:'1',left:'0px'},300);         span.css({color:'#777'});
});
});



J'ai écrit les effets d'animation selon mes propres préférences. Vous pouvez modifier vous-même les effets spéciaux si vous le souhaitez. .

Copier le code

Le code est le suivant : /* démo01 css */ #main{

fond : #EEE ;

Affichage : bloc en ligne ;
remplissage : 10px ;
}
.menu{position : relative ;
largeur : 100px ;
Hauteur : 40px ;
marge : 10px automatique ;
}

.menu_b{
position : absolue ;
Largeur : 0px ;
hauteur : 0px ;
fond : rouge
indice z : 1px ;
haut : 50%
gauche : 50%
}
.menu span{
poste : hériter ;
Affichage : bloquer
Alignement du texte : centre ;
Hauteur de ligne : 40px ;
indice z : 3px ;
taille de police : 14px ;
famille de polices : "Microsoft Yahei" ;
Couleur : #777 ;
Curseur : pointeur ;
}
.retour1{
arrière-plan : #FF0000 ;
}
.retour2{
arrière-plan : #921AFF ;
}
.back3{
arrière-plan : #00CACA ; }
.retour4{
arrière-plan : #00DB00 ;
}
.retour5{
arrière-plan : #FF5809 ;
}
.retour6{
fond : #E1E100 ;
}



Le code est très simple, et il est également très simple à utiliser, y compris les modifications. Vous pouvez le comprendre par vous-même