获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
function getStyle(element, attr) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr]
: element.currentStyle[attr] || 0;
}
function animate(element,json,fn){
clearInterval(element.timeId);
element.setInterval(function(){
var flag=true;
for (var attr in json){
if (attr=="opacity"){
var current=getStyle(element,attr)*100;
var target=json[attr]*100;
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style[attr]=current/100;
} else if(attr=="zIndex"){
element.style[attr]=json[attr];
} else {
var current=parseInt(getStyle(element,attr));
var target=json[attr];
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style[attr]=current+"px";
}
if(current!=target){
flag=false;
}
}
if(flag){
clearInterval(element.timeId);
if(fn){
fn();
}
}
},20);
}
测试代码
my$("btn1").onclick = function () {
var json1 = {"width": 400, "height": 500, "top": 80, "left": 500, "opacity": 0.2};
animate(my$("dv"), json1, function () {
var json2 = {"width": 500, "height": 500, "top": 0, "left": 0, "opacity": 0.8, "zIndex": 1000};
animate(my$("dv"), json2);
});
};
