//******************@author : 司徒正美************
var transition = function(el){
el.style.position = "absolute";
var options = arguments[1] || {},
begin = options.begin,//开始位置
change = options.change,//变化量
duration = options.duration || 500,//缓动效果持续时间
field = options.field,//必须指定，基本上对top,left,width,height这个属性进行设置
ftp = options.ftp || 50,
onStart = options.onStart || function(){},
onEnd = options.onEnd || function(){},
ease = options.ease,//要使用的缓动公式
end = begin + change,//结束位置
startTime = new Date().getTime();//开始执行的时间
onStart();
(function(){
setTimeout(function(){
var newTime = new Date().getTime(),//当前帧开始的时间
timestamp = newTime - startTime,//逝去时间
delta = ease(timestamp / duration);
el.style[field] = Math.ceil(begin + delta * change) + "px"
if(duration <= timestamp){
el.style[field] = end + "px";
onEnd();
}else{
setTimeout(arguments.callee,1000/ftp);
}
},1000/ftp)
})()
}
参数 类型 说明
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种）：
以下为引用的内容：
var tween = {
easeInQuad: function(pos){
return Math.pow(pos, 2);
},