動態互動網頁

jQuery

網頁右下角為自己繪製的自創角色 ——「饅頭」,該網頁會透過 jQuery 控制角色的動作。當網頁開始執行時,會獲取視窗的尺寸與游標的位置,目的是為了利用這些參數,控制網頁左下方饅頭的動作;當使用者在網頁中移動游標時,饅頭會因注視著移動中的游標而產生扭動。

為了能夠呈現較自然的扭動效果,因此需將饅頭的圖檔依照不同的圖層,拆分為不同元件,並且針對不同元件進行變形與位移,模擬出較為自然的扭動效果。

除了移動游標的互動效果外,滑鼠點擊網頁時也有設定不同的互動效果;該網頁設定「藍色」、「紅色」、「黃色」三種顏色的背景,點擊滑鼠後會觸發更改顏色的效果,連續點擊網頁即可快速切換網頁的背景顏色。