基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果分享_javascript技巧

/*
createByTommy_20110525
emial:@csslife@163.com
用途：
执行渐隐等动画效果
传入参数说明：
1、第一个参数为需要变换对象或ID；
2、第二个参数为一个对象包含：
1)、sty->变换对象需要改变的属性，默认为改变宽度（也可以传非style的属性比如scrollTop等）
2)、curClass->变换对象完成改变后需要添加的当前类,默认为空
3)、maxVal->改变属于的最大值，默认为0（如果curClass为宽高等style属性表示隐藏），当这个要改变的属性值达到时停止动画
4)、effect->执行的动画效果默认为outQuad，如需弹跳效果将其值设置为2
3、最后个参数为可选参数表示当动画执行完毕后运行的回调函数
*/

//animation
var ani = function(){this.init.apply(this,arguments)}
ani.prototype = {
_id:function(i){
if(!i) return;
return typeof i != "string" && i.nodeType === 1 ? i : document.getElementById(i);
},
init:function(e,s,callback){
this.e = this._id(e);
this.setInit(s||{});
var maxS = parseInt(this.s.maxVal),speed = maxS==0?Math.max(this.getSty(this.e,this.s.sty),1):maxS/5;
this.fun(speed,maxS,callback)
},
formula:function(x){
var f;
switch(this.s.effect){
case 0:
f = "outQuad";
break;
case 1:
f = "inQuad";
break;
case 2:
f = "bounce";
break;
default:
f = "easeInBack";
}
this.tween ={
outQuad:function(pos){return Math.pow(pos, 2)},//outQuad
inQuad:function(pos){return -(Math.pow((pos-1),2)-1)},//inQuad
bounce:function(pos){//bounce
if (pos < (1 / 2.75)) {
return (7.5625 * pos * pos);
} else if (pos < (2 / 2.75)) {
return (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75);
} else if (pos < (2.5 / 2.75)) {
return (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
} else {
return (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);
}
},
easeInBack:function(pos){var s = 1.70158;return (pos) * pos * ((s + 1) * pos - s);}
};
return this.tween[f](x);
},
findAry:function(attr){
var rg = ["width","height","top","bottom","left","right","margin","padding"];
for(var z in rg){
if(rg[z]==attr) return true;
}
return false;
},
setInit:function(s){
this.s = {
sty:"width",
curClass:"",
maxVal:0,//效果最大值
effect:1//执行效果
}
for(i in s) this.s[i] = s[i];
},
setSty:function(x){
var attr = this.s.sty;
if(this.findAry(attr)){
this.e.style[attr] = x + 'px';
var isIE6 = navigator.appVersion.indexOf("MSIE 6")>-1;
isIE6&&attr=="top"&&(this.e.style[attr] = x + document.documentElement.scrollTop + 'px');
}else if(attr=="opacity"){
this.s.maxVal===1&&(this.e.style.display = "block");
this.e.style.opacity = x;
this.e.style.filter = "alpha(opacity="+x*100+")";
}else{
this.e[this.s.sty] = x
}
},
getSty:function(e,s){
var val = e.currentStyle?e.currentStyle[s]:document.defaultView.getComputedStyle(e,null)[s];
return parseInt(val)||0;
},
fun:function(f,m,callback){
var D = Date,t = new D,e,T = 500,_this = this;
return e = setInterval(function() {
var z = Math.min(1, (new D - t) / T),
c = _this.s.curClass,
curC = _this.e.className;
_this.setSty( + f + (m - f) * _this.formula(z));
if (z == 1) {
if (callback && typeof callback == 'function') callback();
_this.s.maxVal==0&&(_this.e.getAttribute("style"))&&(_this.e.style.display="none");
if(c!=""&&curC.indexOf(c)<0)_this.e.className += c;
clearInterval(e);
}
},10);
}
}