Bar navigasi kilat seperti jquery yang menakjubkan effects_jquery

Navigasi FLASH pada dasarnya sudah lapuk sekarang, tetapi kami boleh menggunakan jQuery untuk mencapai kesan kilat, yang sangat bagus.

Alamat demo: http://demo.jb51.net/js/2014/jqeryfangflashdh/demo.html

Salin kod Kod adalah seperti berikut:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  ...                                                                                                                                                                                                                                                                                                                                                                                                                                                ...                                                                                                                                                                                                                                                                                                                                                                                                                                                ...                                                                                                                                                                                                                                                                                                                                                                                                                                                             ...                                                                                                                                                                                                                                                                                                                                                                                                                                                    ...                                                                                                                                                                                                                                                                                                                                                                                                                                                    ...                                                                                                                                                                                              






Salin kod


Kod adalah seperti berikut:

$(document).ready(function(){
$(".menu").mouseover(function(){
      var div = $(this).children(".menu_b");  
        var span = $(this).children("span");  
//Sembunyikan fon, alihkan 20px ke kanan
        span.stop(true,false).animate({opacity:'0',left:'20px'},200); //Tunjukkan animasi latar belakang
        div.stop(true,false).animate({width:'100px',marginLeft:'-50px',height:'1px',opacity:'1'},300);       div.animate({height:'40px',marginTop:'-20px',opacity:'1'},300); //Paparkan fon, gerakkan 20px ke kiri
        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");  
//Sembunyikan fon, gerakkan 20px ke kiri
        span.stop(true,false).animate({opacity:'0',left:'20px'},200); //Tunjukkan animasi latar belakang
        div.stop(true,false).animate({height:'1px',marginTop:'0px',opacity:'1'},300);       div.animate({width:'0px',marginLeft:'0px',opacity:'1'},300); //Paparkan fon, gerakkan 20px ke kanan
        span.animate({opacity:'1',left:'0px'},300
        span.css({color:'#777'});
});
});



Kesan animasi ditulis oleh saya berdasarkan pilihan saya sendiri. Anda boleh menukar kesan khas itu sendiri jika anda suka. .

Salin kod

Kod adalah seperti berikut: /* demo01 css */ #utama{ latar belakang: #EEE; Paparan: inline-block; padding: 10px;

}

.menu{kedudukan: relatif;
Lebar: 100px; tinggi: 40px;
jidar: 10px auto; }

.menu_b{
kedudukan: mutlak; Lebar: 0px; tinggi: 0px;
latar belakang: merah; indeks-z: 1px; atas: 50%; kiri: 50%; }
.span menu{
jawatan: mewarisi
Paparan: blok
Selaraskan teks: tengah
Ketinggian garisan: 40px; z-indeks: 3px; saiz fon: 14px; font-family: "Microsoft Yahei"; Warna: #777; Kursor: penunjuk; }
.belakang1{
latar belakang: #FF0000; }
.belakang2{
latar belakang: #921AFF; }
.belakang3{
latar belakang: #00CACA; }
.belakang4{
latar belakang: #00DB00; }
.belakang5{
latar belakang: #FF5809; }
.belakang6{
latar belakang: #E1E100; }



Kod ini sangat mudah, dan ia juga sangat mudah untuk digunakan, termasuk pengubahsuaian Anda boleh memikirkannya sendiri