javascript实现网页中涉及的简易运动（改变宽高、透明度、位置）
平时工作中写网页涉及的运动往往都非常简单，比如改变宽高，透明度，位置，是最常用的几种形式，为了省事，整合了下，于是就有了下面这个东东：
兼容：IE系列、chrome、firefox、opera、Safari、360
/*
javascript简易运动
Move.action(dom对象,json格式属性值对，缓动参考值，回调方法)
示例：
varbox=document.getElementById('Ele');
Move.action(box,{width:500,height:200,left:200,top:100,marginLeft:10,opacity:.5},5,function(){
console.log('end');
});
*/
varMove={
version:'1.5',
//判断是否空对象
isEmptyObject:function(obj){
for(varattrinobj){
returnfalse;
}
returntrue;
},
//取CSS样式值
getStyle:function(obj,attr){
if(obj.currentStyle){//IE
returnobj.currentStyle[attr];
}else{
returngetComputedStyle(obj,null)[attr];
}
},
//运动
action:function(obj,json,sv,callback){
_this=this;
//obj是否为空
if(_this.isEmptyObject(obj)){
returnfalse;
}
//运动开始
clearInterval(obj.timer);
obj.timer=setInterval(function(){
varisAllCompleted=true,//假设全部运动都完成了
speed,//速度
attrValue,//当前值
targetV;//目标值
for(attrinjson){
attrValue=_this.getStyle(obj,attr);
switch(attr){
case'opacity':
attrValue=Math.round((isNaN(parseFloat(attrValue))?1:parseFloat(attrValue))*100);
speed=(json[attr]*100-attrValue)/(sv||4);
targetV=json[attr]*100;
break;
default:
attrValue=isNaN(parseInt(attrValue))?0:parseInt(attrValue);
speed=(json[attr]-attrValue)/(sv||4);
targetV=json[attr];
}
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//如果循环过程中存在尚未结束的运动，isAllCompleted为假
if(attrValue!=targetV){
isAllCompleted=false;
}
switch(attr){
case'opacity':
{
obj.style.filter="alpha(opacity="+(attrValue+speed)+")";
obj.style.opacity=(attrValue+speed)/100;
};
break;
default:
obj.style[attr]=attrValue+speed+'px';
}
}
//所有循环结束后，只有当全部运动结束后（isAllCompleted=true）时才关闭定时器
if(isAllCompleted){
clearInterval(obj.timer);
if(typeofcallback==='function'){
callback();
}
}
},30);
}
};
以上就是描述了javascript实现网页中涉及的简易运动的方法，希望对大家实现javascript简易运动有所启发。