(1) Dimensions尺寸的偵測方式
[參考]
(2) 物件加強
| 物件 | 說明 |
|---|---|
| window | 瀏覽器視窗物件 |
| document | 網頁文件內容全部 |
(3) 自定動畫效果
選取器物件.animate(properties [,duration][,easing][,complete]) [參考][參考]
改變選取器物件的屬性來設計動畫 (物件屬性改變的目標 [,動畫持續的時間][,加減速效果][,完成動畫後執行的工作])
(4) 加減速變化的外掛
下載動畫時加減速變化的外掛 
[參考]
加上加減速變化的外掛後, 可以運用以下加減速的參數 [參考]
linear,easeInSine,easeOutSine,easeInOutSine,easeInQuad,easeOutQuad,easeInOutQuad,
easeInCubic,easeOutCubic,easeInOutCubic,easeInQuart,easeOutQuart,easeInOutQuart,
easeInQuint,easeOutQuint,easeInOutQuint,easeInExpo,easeOutExpo,easeInOutExpo,
easeInCirc,easeOutCirc,easeInOutCirc,easeInBack,easeOutBack,easeInOutBack,
easeInElastic,easeOutElastic,easeInOutElastic,easeInBounce,easeOutBounce,easeInOutBounce
(1) 運用animate設計自定動畫
| HTML： |
|
| CSS： |
|
| JS： | 設計區塊以1秒時間向右移動, 停留1秒後再向下移動, 停留1秒後再向左移動, 停留1秒後再向上移動
|
| 結果： | 區塊在網頁的四周移動一圈, 但移動到下方時, 區塊超出視窗一部份了 |
| 改良： | 設定網頁body高度大於視窗, 再運用setTimeout函數讓動畫不斷地循環移動
|
| 結果： | 區塊會移動到網頁文件的最下方, 也就是超出了視窗
|
| 改良： | 如果希望區塊在視窗可見範圍內的四週移動, document物件改成window物件,
|
| 結果： |
