[心得] JS多層下拉主選單 + flash輪播看板

[Isacat (日光貓....^o.o^)]

範例：http://www.unas.com.tw/test/CCSS/test.html
下載：http://dl.dropbox.com/u/9655383/header.zip (保留時間未定@@~)

【Jquery Dropdown Menu】多層次下拉選單

因為這是接案子要做的東西，
所以即使市面上的jquery dropdown menu一堆又一堆（http://0rz.com/KSG17y），
還是得查清楚是否合用以及是否可商用@@~

原本想用這個：http://apycom.com/ 可惜發現不能商業用途…
後來找到這個：http://www.scriptiny.com/2008/11/drop-down-menu/

This script has been tested in all major browsers and is available free of
charge for both personal or commercial projects under the creative commons
license.

這一句話真是宛如天籟啊

效果不錯，可以層層疊疊很多層，html結構也單純，各家版本瀏覽器相容度也高…
但後來業主要求次選單要半透明，起先我用CSS做，卻發現連選項文字也半透明了，
後來只好做一個半透明的PNG圖檔襯底，結果用IE8瀏覽就會出包，目前尚無解。

【Flash + xml + 外部載入swf】動畫輪播Banner

原始檔是campaign.fla這個檔案，某位大陸同胞廣泛在網路上流傳分享的資源，
Google搜尋關鍵字「flash+xml 加載swf輪播」即可找到教學。
但它的loading bar始終讓我用得不太順手，還有一些瑣瑣碎碎的小細節想改，
所以為了工作，還是乖乖地認真翻閱起那本進購半年多還沒翻過的AS3辭典了。

這Banner的優點，在於輪播的不是圖片而是動畫。
每一段動畫結束後，會自動繼續播放下一段，
另可點選小豆豆切換動畫，或點畫面導入指定超連結。
動畫和超連結的路徑，都可以用index.xml這個檔案寫入，免改Flash，
算是一個不錯的廣告看板模組。

其實我本來也想用Jquery做輪播Banner，在點選切換的box中再塞swf這樣，
但我天真了，Jquery無法判斷各幀swf幾時結束幾時該切換…
最終只好回歸Flash的懷抱，並且是AS3嶄新的懷抱，扎得我好痛吶～
光是為了修改一些小小小細節，就花了我一整天的時間，
搞到各幀動畫都差點沒時間處理，業主也完全無法理解，
不過完成之後心得頗豐，對於AS3沒那麼害怕了，
工作也交件了（主要），所以就來po個文啦～

PS: 資料夾swf裡面那四幀動畫是主要工作項目，所以不提供fla，其他請自便。

順便分享一個蒐集圖庫時看到的有趣圖片：

「沙發上討論問題的商務人物腿部特寫」
http://pic11.nipic.com/20101114/2457331_134205297000_2.jpg

兩位確定是在討論問題嗎？o_O

--

  U.Design 網頁設計作品集 http://unas.com.tw/U_Design/

--
※ 發信站: 批踢踢實業坊(ptt.cc)
※ 編輯: Isacat          來自: 114.46.138.187       (04/29 14:26)
→ magazine2006:為什麼滑後面的按鈕前面的會亮阿...這是特殊效果嘛
→ Isacat:囧rz...我也不曉得耶 你是用甚麼瀏覽器？
→ Isacat:還有lag的時候也有可能發生這情況(上一個滑過後遲滯反應)
→ Isacat:如果是用PCman看的就會有BUG，這只有配合IE8+ FX Chrome...
→ Isacat:js/TinyDropdown/style.css 裡面的檔案剛剛有更新過XD
※ 編輯: Isacat          來自: 114.46.138.187       (04/29 17:49)
推 akou:好資訊～～謝謝～～很常用到吶
→ Isacat:查到問題了...只要把它塞在一個很合理的<div>裡面
→ Isacat:用PCman或其他比較殘的瀏覽器看就會發生亂跑亂變色的怪bug
→ Isacat:難怪它提供的範例裡面是直接body下面塞<ul>....!!!!!
→ Isacat:呃我激動了(大概是餓了出門吃飯去=.=)
推 loser5566:感激大大分享!!!