วิธีการสร้างเอฟเฟกต์การนำทางที่ละเอียดอ่อน

ทุกคนคุ้นเคยกับเอฟเฟกต์การนำทางทั่วไป เช่น การใช้ CSS เพื่อตั้งค่า ขีดเส้นใต้ สีพื้นหลัง หรือการแทนที่ข้อความการนำทาง ในโพสต์ที่แล้ว ชาวเน็ตบางคนกล่าวถึงเว็บไซต์ http://www.tonta.com.cn/ และฉันพบว่าเอฟเฟกต์การนำทางบนหน้าแรกนั้นดี แม้ว่าแฟลชจะไม่มีเอฟเฟกต์ที่น่าตื่นตาตื่นใจ แต่ก็ค่อนข้างดี ละเอียดอ่อนและดูสบายตามาก
ฉันไม่มีอะไรทำและพยายามให้ได้เอฟเฟกต์การนำทางแบบเดียวกันใน dw เอฟเฟกต์มีดังนี้: http://vip.5d.cn/flood/daohang/1.htm
ขั้นแรก ให้วิเคราะห์องค์ประกอบของเอฟเฟกต์ เมื่อเลื่อนเมาส์ไป พื้นหลังจะเปลี่ยนไปและรูปภาพขนาดเล็กจะหมุน ตกลง! พิจารณาใช้ภาพสลับ (ภาพพลิก) + การเปลี่ยนภาพพื้นหลัง (คำจำกัดความ CSS) ใน dw ซึ่งควรจะสามารถบรรลุผลได้
เตรียมรูปภาพ GIF 4 รูป:
ภาพพื้นหลังเมื่อเมาส์เลื่อนผ่าน (ใน FW, Nimate สามารถบรรลุเอฟเฟกต์การไล่ระดับสีได้อย่างง่ายดาย ความโปร่งใสของภาพนี้จะค่อยๆเปลี่ยนจาก 0% เป็น 100%)
[img]/conimages/web/2003-06/bg0604.gif[/img]
ภาพพื้นหลังเมื่อดึงเมาส์ออกมา (ความโปร่งใสของภาพนี้จะค่อยๆ เปลี่ยนจาก 100% เป็น 0%)
[img]/conimages/web/2003-06/b0604.gif[/img]
ภาพขนาดเล็กแบบไดนามิก
[img]/conimages/web/2003-06/20604.gif[/img]
ภาพนิ่งขนาดเล็ก (ตั้งค่ารูปแบบภาพเป็น gif ใน fw แล้วบันทึก)
[img]/conimages/web/2003-06/2a0604.gif[/img]

1. เอฟเฟกต์พื้นหลังถูกนำมาใช้โดยใช้ CSS เพื่อกำหนดสองคลาส:

.style1 { background-image: url(bg.gif)}
.style2 {พื้นหลังภาพ: url(b.gif)}

ใช้สำหรับภาพพื้นหลังเมื่อเมาส์ผ่านและเมื่อดึงเมาส์ออกมา จากนั้นเพิ่มโค้ดต่อไปนี้ในเซลล์:

onmouseover="this.className=' สไตล์1'"
onmouseout="this.className='style2'"

สามารถบรรลุเอฟเฟกต์ของการไล่ระดับสีพื้นหลังที่ปรากฏขึ้นเมื่อเมาส์ผ่านไป และหายไปหลังจากเลื่อนเมาส์ออกไป
2. เอฟเฟกต์ภาพพลิกช่วยให้คุณสามารถแทรกภาพนิ่งขนาดเล็กลงในเซลล์ ใช้ลักษณะการทำงานเพื่อเพิ่มเอฟเฟกต์ภาพสลับ และตั้งค่าให้พลิกเป็นรูปภาพขนาดเล็กแบบไดนามิกหลังจากที่เมาส์ผ่านไป
เพื่อให้ได้เอฟเฟกต์ที่ใกล้ยิ่งขึ้น คุณจะต้องใช้เอฟเฟกต์ภาพพลิกกับเซลล์ และตัดโค้ดต่อไปนี้ในโค้ดรูปภาพขนาดเล็กแบบคงที่:

onMouseOver="MM_swapImage('Image2','','2.GIF', 1)"
onMouseOut="MM_swapImgRestore()"

ถูกวางลงในแท็กโค้ดเซลล์ td
คุณสามารถพลิกภาพได้เมื่อเมาส์ผ่านเซลล์ ทำให้เกิดเอฟเฟกต์ไดนามิก
ณ จุดนี้ เอฟเฟกต์ทั้งหมดสามารถทำได้
ในตัวอย่างนี้ เอฟเฟกต์ที่ได้จากการใช้ dw แทบจะเทียบได้กับเอฟเฟกต์ที่เกิดจากแฟลช หรือดีกว่านั้นอีก (เราได้รับเอฟเฟกต์ของการไล่ระดับสีพื้นหลังที่หายไปเมื่อเมาส์ดึงเซลล์ออกมา)
ส่วน:
1. การสร้างภาพพื้นหลังไล่ระดับสีอย่างระมัดระวังใน fw (ฉันเพิ่งสร้างภาพไล่ระดับสีแบบสุ่มสองภาพ) + การแก้ไขเซลล์การนำทางสามารถทำให้เอฟเฟกต์ละเอียดอ่อนและโดดเด่นยิ่งขึ้น
2. เมื่อใช้วิธีการนี้เพื่อสร้างเอฟเฟกต์การนำทาง คุณต้องใช้หลายเซลล์ โปรดทราบว่าไม่สามารถคัดลอกเอฟเฟกต์การสลับได้ หลังจากคัดลอกโค้ดแล้ว คุณต้องแก้ไขสองโค้ด:

onMouseOver="MM_swapImage('Image3','',' 2.GIF' ,1)"
<img src="2a.gif" name="Image3" width="15" height="15" border="0" id="Image3">

เพียงแก้ไขชื่อของภาพพลิกให้เป็นค่าอื่น
3. เนื้อหาทางเทคนิคของตัวอย่างนี้ไม่สูงมาก และฉันไม่คุ้นเคยกับ flash มากนัก ดังนั้นฉันจึงไม่รู้ว่าอันไหนใช้งานง่ายกว่า dw หรือ flash แต่ฉันพูดถึงมันที่นี่เพียงเพื่อให้คุณมีวิธี แก้ปัญหา
4. การซ้อนทับของเอฟเฟกต์ธรรมดาสองแบบสามารถสร้างเอฟเฟกต์ที่เจ๋งกว่าได้ ฉันหวังว่ามันจะให้ความกระจ่างแก่ทุกคน อีกประเด็นหนึ่ง: เมื่อสร้างภาพพื้นหลังแบบเคลื่อนไหว เพื่อให้ได้เอฟเฟกต์ คุณต้องตั้งค่าการวนซ้ำของภาพเคลื่อนไหว GIF เป็นไม่มี วนซ้ำ (ไม่ใช่วนซ้ำ)
-