| 參數 |
類型 |
說明 |
| el |
element |
必需，為頁面元素 |
| begin |
number |
必需，開始的位置 |
| change |
number |
必需，要移動的距離 |
| duration |
number |
可選，緩動效果期間，預設是500ms。建議取300~1000ms。 |
| field |
string |
必需，要發生變化的樣式屬性。請在top，left，bottom,right，width與height中選擇。 |
| ftp |
number |
可選，每秒進行多少幀動畫，預設50幀，保證流暢播放。一些參考資料，日本動畫1秒36幀，中國卡通24幀，賽車遊戲60幀。 |
| ease |
function |
必需，緩動公式，參數為0~1之間的數。可參考我下面給出的45條公式。 |
| onStart |
function |
可選，在開始時執行。 |
| onEnd |
function |
可選，在結束時執行。 |
prototype流派的緩動公式，只需一個參數（增至45種）
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8"> <style type="text/css"> .taxiway{ width:800px; height:100px; background:#E8E8FF; } .move{ width:100px; height:100px; background:#a9ea00; } #panel { float:left; width:810px } #panel div{ float:left; width:88px; border:1px solid #333; height:20px; font-size:11px; } div.transition { margin-top: 30px; width: 200px; height: 200px; position: relative; margin-bottom:10px; } div.transition div { position: absolute; height: 1px; width: 1px; background: #000; } div.transition span { display: block; position: absolute; border-bottom: 1px solid #dadada; font-size: 10px; color: #888; width: 200px; left: 0px; } div.transition div#indicator { position:absolute; background-color:#a9ea00; height: 200px; top: 0px; left: 0px; } div.transition div#marker { background-color: #f00; height: 6px; width: 6px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; left: 0px; margin-bottom: -3px; margin-left: -3px; } div.transition div#label { background: transparent; color: #ABD474; font-size: 20px; height: 20px; width: 200px; text-align: center; top: 80px; left: 0px; z-index: -1; } </style> <title>緩動BY司徒正美</title> </head> <body> 請點擊下表的格子 </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
