Atemberaubende jquery-ähnliche Flash-Navigationsleisteneffekte_jquery

Die FLASH-Navigation ist mittlerweile im Grunde veraltet, aber wir können jQuery verwenden, um Flash-Effekte zu erzielen, was sehr gut ist.

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

Code kopieren Der Code lautet wie folgt:

                                                                                                                                                                                                                                                                                                                                       & 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;                                                                                                                                                                            






Code kopieren


Der Code lautet wie folgt:

$(document).ready(function(){
$(".menu").mouseover(function(){
      var div = $(this).children(".menu_b");           var span = $(this).children("span");   //Schriftart ausblenden, 20 Pixel nach rechts verschieben
        span.stop(true,false).animate({opacity:'0',left:'20px'},200
//Hintergrundanimation anzeigen
        div.stop(true,false).animate({width:'100px',marginLeft:'-50px',height:'1px',opacity:'1'},300);       div.animate({height:'40px',marginTop:'-20px',opacity:'1'},300); //Schriftart anzeigen, 20 Pixel nach links verschieben
        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");   //Schriftart ausblenden, 20 Pixel nach links verschieben
        span.stop(true,false).animate({opacity:'0',left:'20px'},200
//Hintergrundanimation anzeigen
        div.stop(true,false).animate({height:'1px',marginTop:'0px',opacity:'1'},300);       div.animate({width:'0px',marginLeft:'0px',opacity:'1'},300); //Schriftart anzeigen, 20 Pixel nach rechts verschieben
        span.animate({opacity:'1',left:'0px'},300);         span.css({color:'#777'}); });
});



Die Animationseffekte werden von mir nach meinen eigenen Vorlieben geschrieben. Sie können die Spezialeffekte selbst ändern, wenn Sie möchten. .





Code kopieren


Der Code lautet wie folgt:

/* demo01 css */

#main{

Hintergrund: #EEE;

Anzeige: Inline-Block; Polsterung: 10px; } .menu{position: relative; Breite: 100px; Höhe: 40px; Rand: 10px automatisch;

}

.menu_b{
Position: absolut;
Breite: 0px;
Höhe: 0px;
Hintergrund: rot;
Z-Index: 1px; oben: 50 %; links: 50 %; }
.menu span{
Position: erben;
Anzeige: blockieren;
Textausrichtung: zentriert;
Zeilenhöhe: 40px; Z-Index: 3px; Schriftgröße: 14px; Schriftfamilie: „Microsoft Yahei“; Farbe: #777;
Cursor: Zeiger;
}
.back1{
Hintergrund: #FF0000;
}
.back2{
Hintergrund: #921AFF;
}
.back3{
Hintergrund: #00CACA;
}
.back4{
Hintergrund: #00DB00;
}
.back5{
Hintergrund: #FF5809;
}
.back6{
Hintergrund: #E1E100;
}



Der Code ist sehr einfach und auch sehr einfach zu verwenden, einschließlich Änderungen. Sie können ihn selbst herausfinden