javascript封装animate动画
面向对象式:
Element.prototype.animate=animate;
Element.prototype.getStyle=getStyle;
function animate(json,callback) {
clearInterval(this.timer);
for (var attr in json) {
var that = this;
this.timer = setInterval(function () {
if (attr == 'opacity') {
that.icur = Math.round(parseFloat(that.getStyle()[attr]) * 100);
} else {
that.icur = parseInt(that.getStyle()[attr]);
}
that.speed = (parseInt(json[attr]) - that.icur) / 10;
that.speed = that.speed > 0 ? Math.ceil(that.speed) : Math.floor(that.speed);
if (attr == 'opacity') {
that.style.filter = 'alpha(opacity:' + that.icur + that.speed + ')';
that.style.opacity = (that.icur + that.speed) / 100;
} else {
that.style[attr] = that.icur + that.speed + "px";
};
if(that.icur==parseInt(json[attr])){
//flags=true;
clearInterval(that.timer);
if(callback){
callback();
}
}
}, 20);
}
}
function getStyle() {
if (this.currentStyle) {
return this.currentStyle;
} else {
return document.defaultView.getComputedStyle(this, null);
}
}
函数式:
// Element.prototype.animate=animate; Element.prototype.getStyle = getStyle; function animate(obj, json, callback) { //var flags=false; clearInterval(obj.timer); for (var attr in json) { //var that = this; var icur = 0, speed = 0; obj.timer = setInterval(function () { if (attr == 'opacity') { icur = Math.round(parseFloat(obj.getStyle()[attr]) * 100); } else { icur = parseInt(obj.getStyle()[attr]); } speed = (parseInt(json[attr]) - icur) / 10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (attr == 'opacity') { obj.style.filter = 'alpha(opacity:' + icur + speed + ')'; obj.style.opacity = (icur + speed) / 100; } else { obj.style[attr] = icur + speed + "px"; }; if (icur == parseInt(json[attr])) { //flags=true; clearInterval(obj.timer); if (callback) { callback(); } } }, 20); } } function getStyle() { if (this.currentStyle) { return this.currentStyle; } else { return document.defaultView.getComputedStyle(this, null); } }

浙公网安备 33010602011771号