js小动画效果完整版

/*perfectMove.js*/

//获得标签属性

function getStyle(obj, attr/*属性*/) {

if(obj.currentStyle) {

return obj.currentStyle[attr];

} else {

return getComputedStyle(obj, false)[attr];

}

}

function startMove(obj, json, fn) {

clearInterval(obj.time);//防止多次触发事件改变运动

obj.time = setInterval(function() {

//用来判断所有运动都结束

var isStop = true;

for(var attr in json) {

var curr = 0;

var speed = 0;

//如果是不透明度

if(attr == "opacity") {

//取到起始点

curr = parseFloat(getStyle(obj, attr));

//设置速度

speed = (json[attr] - curr) * 100 / 8;

} else {

//取到起始点

curr = parseInt(getStyle(obj, attr));

//设置速度

speed = (json[attr] - curr) / 8;

}

speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

//如果有一个属性值未达到目标值的时候

if(curr != json[attr]) {

isStop = false;

}

//如果是不透明度

if(attr == "opacity") {

obj.style[attr] = parseFloat((curr + speed / 100).toFixed(2));

} else {

obj.style[attr] = curr + speed + "px";

}

}

//当所有属性值到达目标值时，停止

if(isStop) {

clearInterval(obj.time);

if(fn) {

fn();

}

}

}, 30);

}