Rumah >hujung hadapan web >tutorial js >Bagaimana untuk melaksanakan kesan animasi gelongsor tetikus sensitif menu dengan jQuery_jquery

Bagaimana untuk melaksanakan kesan animasi gelongsor tetikus sensitif menu dengan jQuery_jquery

WBOYasal: 2016-05-16 16:12:021186semak imbas

Contoh dalam artikel ini menerangkan cara jQuery melaksanakan kesan animasi gelongsor tetikus sensitif menu. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Persekitaran ujian untuk kod ini ialah penyemak imbas IE9 dan GG dan FF dan di bawah mungkin tidak menyokongnya.

Kesan gelongsor tetikus JS ini menggunakan jQuery untuk mencapai animasi ringkas, dan saya terkejut apabila mendapati jquery mempunyai kaedah penulisan yang lebih baik, yang boleh ditulis secara berterusan sebelum kaedah animasi dapat menyedarinya selepas tetikus dialih keluar, tidak Kemudian lakukan kesan gelongsor.

Salin kod Kod adalah seperti berikut:

Kesan gelongsor tetikus jQuery yang sangat baik

badan{font-size:12px;font-family:Tahoma,Arial,Verdana;color:#fff;latar belakang:#000:100%; body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pra,form,fieldset,input,textarea,p,blockquote,th,td ,i{padding: 0;margin:0}
set medan,img {sempadan:0}
.jelas{ jelas:keduanya;}
alamat, kapsyen, petikan, kod, dfn, em, ke, var {font-weight:normal;font-style:normal}
ol,ul {list-style:none}
kapsyen, ke {text-align:left}
h1,h2,h3,h4,h5,h6 {saiz fon:100%}
abbr,akronim,img {sempadan:0}
butang,input,pilih,textarea{font-size:100%;}
input,butang,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
jadual {border-collapse:collapse;border-spacing:0;}
a{text-decoration:none;}
a:hover {text-decoration:underline;}
.clearfix:selepas {visibility: hidden;display: block;font-size: 0;content: ".";clear:both;}
.semua ul{ lebar:100%; text-align:center;}
.semua ul li{ lebar:100%; ketinggian:40px;

Item pertama

Item kedua

Item ketiga