javascript运动框架

下面这个一个运动框架可以控制元素在一个属性上的运动，同时，可以调用回调函数。

/*
获取元素某个属性的值
@obj: 对象
@attr: 属性值
*/
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj, false)[attr];
}
}

/*
获取元素某个属性的值
@obj: 对象
@attr: 属性值
@iTarget: 目标值(int)
@fn: 回调函数
*/
function startMove(obj, attr, iTarget, fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){

if(attr =="opacity"){
var iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
}else{
var iCur = parseInt(getStyle(obj, attr));
}

var iSpeed = (iTarget-iCur)/8;
iSpeed = iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed);

if(iCur == iTarget){
clearInterval(obj.timer);

if(fn){
fn();
}
}
else{
if(attr == "opacity"){
obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed)+ ')';
obj.style.opacity = (iCur + iSpeed)/100;
}else{
obj.style[attr] = iCur + iSpeed + 'px';
}

}
}, 30);
}

上面这个运动框架存在不足：它只能给一个属性设置动画，下面这个运动框架通过json来实现给多个属性同时设置动画：

/*
获取元素某个属性的值
@obj: 对象
@attr: 属性值
*/
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj, false)[attr];
}
}

/*
获取元素某个属性的值
@obj: 对象
@json: {属性值1:目标值1,属性值2:目标值2,...}
@fn: 回调函数
*/
function startMove(obj, json, fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var bStop = true;    //运动结束标致
for(var attr in json){

//1.取当前值
iCur = 0;
if(attr =="opacity"){
var iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
}else{
var iCur = parseInt(getStyle(obj, attr));
}

//2.算速度
var iSpeed = (json[attr]-iCur)/8;
iSpeed = iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed);

//3.检查停止
if(iCur != json[attr]){
bStop = false;
}

if(attr == "opacity"){
obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed)+ ')';
obj.style.opacity = (iCur + iSpeed)/100;
}else{
obj.style[attr] = iCur + iSpeed + 'px';
}
}
if(bStop){
clearInterval(obj.timer);
if (fn) {
fn();
};
}

}, 30);
}

弹性运动：

var iSpeed = 0;
var left = 0;

function startMove(obj, iTarget){

clearInterval(obj.timer)

obj.timer = setInterval(function(){
iSpeed+=(iTarget - obj.offsetLeft)/5;
iSpeed*=0.7;

left +=iSpeed;

if(Math.abs(iSpeed)<1 && Math.abs(left - iTarget)<1){
clearInterval(obj.timer);
obj.style.left = iTarget + 'px';
}else{
obj.style.left = left + 'px';
}

}, 30);
}

View Code
弹性运动运用的范围有限，一般用于菜单的选择特效：带有滑块的导航条