Semua orang akrab dengan efek navigasi umum, seperti menggunakan CSS untuk mengatur, menggarisbawahi, warna latar belakang, atau perpindahan teks navigasi. Pada postingan sebelumnya, beberapa netizen menyebutkan website http://www.tonta.com.cn/ , dan menurut saya efek navigasi di berandanya bagus. Meskipun flash tidak memiliki efek yang terlalu menyilaukan, namun relatif halus dan terlihat sangat nyaman.
Saya tidak melakukan apa pun dan mencoba mencapai efek navigasi yang sama di dw. Efeknya adalah sebagai berikut: http://vip.5d.cn/flood/daohang/1.htm .
Pertama, analisis komposisi efeknya. Saat mouse lewat, latar belakang berubah dan gambar kecil berputar. Oke! Pertimbangkan untuk menggunakan gambar swap (gambar flip) + perubahan gambar latar belakang (definisi CSS) di dw, yang seharusnya dapat mencapai efeknya.
Siapkan 4 gambar gif:
Gambar latar belakang saat mouse lewat (di FW, Nimate dapat dengan mudah mencapai efek gradien. Transparansi gambar ini secara bertahap berubah dari 0% menjadi 100%)
[img]/conimages/web/2003-06/bg0604.gif[/img]
Gambar latar belakang saat mouse ditarik keluar (transparansi gambar ini berangsur-angsur berubah dari 100% menjadi 0%)
[img]/conimages/web/2003-06/b0604.gif[/img]
gambar kecil yang dinamis
[img]/conimages/web/2003-06/20604.gif[/img]
Gambar diam kecil (atur format gambar ke gif di fw dan simpan)
[img]/conimages/web/2003-06/2a0604.gif[/img]
1. Efek latar belakang diimplementasikan menggunakan CSS untuk mendefinisikan dua kelas:
.style1 { background-image: url(bg.gif)}
.style2 {background-image: url(b.gif)}
digunakan untuk gambar latar belakang saat mouse lewat dan saat mouse ditarik keluar. Kemudian tambahkan kode berikut di dalam sel:
onmouseover="this.className=' gaya1'"
onmouseout="this.className='style2'"
dapat mencapai efek gradien latar belakang yang muncul saat mouse lewat, dan menghilang setelah mouse dipindahkan.
2. Efek gambar balik memungkinkan Anda menyisipkan gambar statis kecil ke dalam sel, menggunakan perilaku untuk menambahkan efek pertukaran gambar, dan mengaturnya agar membalik ke gambar kecil dinamis setelah mouse melewatinya.
Untuk mencapai efek yang lebih dekat, Anda perlu menerapkan efek gambar flip ke sel, dan memotong kode berikut dalam kode gambar kecil statis:
onMouseOver="MM_swapImage('Image2','','2.GIF', 1)"
onMouseOut="MM_swapImgRestore()"
ditempelkan ke tag td kode sel.
Anda dapat membalik gambar saat mouse melewati sel, menghasilkan efek dinamis.
Pada titik ini semua efek dapat dicapai.
Dalam contoh ini, efek yang dicapai dengan menggunakan dw hampir sebanding dengan efek yang dihasilkan oleh flash, atau bahkan lebih baik (kita mencapai efek hilangnya gradien latar belakang saat mouse menarik keluar sel).
Bagian:
1. Dengan hati-hati membuat gambar latar belakang gradien di fw (Saya baru saja membuat dua gambar gradien acak) + memodifikasi sel navigasi dapat membuat efeknya lebih halus dan luar biasa;
2. Saat menggunakan metode ini untuk membuat efek navigasi, Anda perlu menggunakan beberapa sel. Perhatikan bahwa efek swap tidak dapat disalin. Setelah menyalin kode, Anda perlu mengubah dua kode:
onMouseOver="MM_swapImage('Image3','',' 2.GIF' ,1)"
<img src="2a.gif" name="Image3" width="15" height="15" border="0" id="Image3">
Cukup ubah nama gambar flip ke nilai yang berbeda.
3． Konten teknis dari contoh ini tidak terlalu tinggi; dan saya tidak terlalu paham dengan flash, jadi saya tidak tahu mana yang lebih mudah digunakan, dw atau flash, tapi saya hanya menyebutkannya di sini untuk memberi Anda cara melakukannya memecahkan masalah.
4. Superposisi dua efek sederhana dapat menciptakan efek yang lebih keren. Saya harap dapat mencerahkan semua orang. Satu hal lagi: saat membuat gambar latar animasi, untuk mendapatkan efek, Anda perlu mengatur perulangan animasi gif ke tidak. perulangan (bukan perulangan)
:)