调用接口：
复制代码 代码如下:
/**
* @param elem {htmlelement} 执行动画的html元素
* @param params {json} 动画执行过过程中需要修改的html属性
* @param duration {number} 可选，动画执行时间，单位毫秒
* @param easing {string} 可选，动画执行的方式，缓入easein、缓出easeout
* @param callback {function} 可选，动画执行完成时的回调函数
* @return
*/
effect.animate(elem, params, duration, easing, callback);
使用它用不了20行代码就可以做一个产品图片减速淡出、加速淡入的切换效果点击这里查看演示效果
复制代码 代码如下:
//辅助对象，读/写dom元素属性
var attribute = {
get: function(elem, attr){
var val;
if(elem.currentstyle){
if(attr === opacity) {
val = elem.filters.alpha[attr];
}else {
val = elem.currentstyle[attr];
}
}
else{
val = getcomputedstyle(elem)[attr];
if(attr === opacity) {
val = 100 * val;
}
}
return val;
},
set: function(elem, attr, val){
if(attr=='opacity'){
elem.style.filter = 'alpha(opacity='+ (val) +')';
elem.style.opacity = (val)/100;
}
else{
elem.style[attr] = val + 'px';
}
}
};
/*
* 描述: tween动画算法。
* @param number t: 动画已经执行的时间（实际上时执行多少次/帧数）
* @param number b: 起始位置
* @param number c: 终止位置
* @param number d: 从起始位置到终止位置的经过时间（实际上时执行多少次/帧数）
*/
var tween = {
//缓入
easein: function (t, b, c, d){
return c * (t/=d) * t + b;
},
//缓出
easeout: function (t,b,c,d){
return -c * (t/=d) * (t-2) + b;
}
};
//动画对象
var effect = {
animate: function(elem, params, duration, easing, callback){
var dt = new date().gettime(),
b = 0,
c = 0,
d = duration || 500,
fps = 1000/60;
var changes = [];
for(var attr in params){
b = parsefloat(attribute.get(elem, attr));
c = params[attr] - b;
changes.push({
attr: attr,
b: b,
c: c
});
}
easing = easing || easeout;
callback = callback || new function;
settimeout(function(){
var t = new date().gettime() - dt;
var b, c, attr;
for(var i=0; ib = changes[i].b;
c = changes[i].c;
attr = changes[i].attr;
attribute.set(elem, attr, tween[easing](t, b, c, d));
if(d attribute.set(elem, attr, params[attr]);
callback();
return;
}
}
settimeout(arguments.callee, fps);
}, fps);
}
};
//by rentj1@163.com