寫script可以動動腦,是不錯的腦筋訓練。近幾年很懶,也因為用mac機開flash經常面對遲緩反應,所以也放下了actionscript的研習,不過我間中就會對寫程式有興趣,然後就上網search資料學。

今次,是因為看到這個日本網站的rollover effect,於是就做了這個實驗。當然也可以用swap image也可以用flash,不過前面的方法其實也要在的部份加code, 而且要額外多做一張rollover圖,用flash就更繁複了。

只要用一個比較輕易看code的text editor,就可以做到了。

程式碼
head部分


body部分


示範:
link

Key Learnings:
1) .hover是rollover的event handler,讓rollover的情況發生時呼出指令。而hover括號後面先後放了兩段function,分別是roll-in及roll-out後的指令。
2) .fadeTo後面至少有兩個值必需填寫,第一個是速度,第二個是透明度。(詳見http://api.jquery.com/fadeTo/
3) 因為要在roll-in時淡化相片,所以透明度調至0.5 (50%),而roll-out則要回復原狀,所以設定為1。
4) 速度也可以milliseconds為單位作設定,除了"fast"/"slow"之外,可用200,400等數值代表。
5) 執行對象方面,可以直接用div, img, p,即第二行用上$("div"),但這樣不夠專業,會令頁面上所有div, img, p物件都產生效果。
6) 執行對象也可以用id設定值,第二行要換上$("#happy"),然後內容以

執行,這樣就可以指定個別項目產生效果。不過id只可以用一次,使用多於一次就只有一件有效。
7) 執行對象也可以用class設定值,第二行要換上$(".happy"),所以最好用上class="happy"而非id="happy",這麼每個class值為happy的物件都可以呼出 fade-in-out 效果。