JS完美运动框架

这套框架实现了多物体，任意值，链式运动，多值运动，基本满足常见的需求。

/*
功能：完美运动框架，可以实现多物体，任意值，链式运动，多值运动
版本：V1.0
兼容性：Chrome，FF，IE8+ (opera没测)
备注：参考了智能社blur老师的代码
*/

/*--------------------------------------------------------
功能：  获取某个节点下的带有某个class的所有节点
输入：  oParent:要获取的class元素的父级节点
sClass:要获取的元素的class名称
输出：  获取到的节点数组
--------------------------------------------------------*/
function getElementsByClassName(oParent, sClass){
var oEle = oParent.getElementsByTagName('*');
var result = [];
for (var i = 0; i < oEle.length; i++) {
if(oEle[i].className == sClass){
result.push(oEle[i]);
}
}
return result;
}

/*--------------------------------------------------------
功能：  获取某个对象的属性的具体数值
输入：  obj:对象
sName:属性
输出：  属性值，注意透明度输出最大为100，不是1
--------------------------------------------------------*/
function getStyle(obj, sName){
var opacityFactor = 1;//如果是透明度属性，值为100，其他属性，值为1
if(sName == 'opacity'){
opacityFactor = 100;
}
if(obj.currentStyle){//IE
return parseFloat(obj.currentStyle[sName]) * opacityFactor;
}else{//非IE
return parseFloat(getComputedStyle(obj, false)[sName]) * opacityFactor;
}
}

/*--------------------------------------------------------
功能：  获取json对象的长度
输入：  json:json对象
输出：  json对象的长度
--------------------------------------------------------*/
function getJsonLength(json){
var jsonLength = 0;
for(var i in json){
jsonLength++;
}
return jsonLength;
}

/*--------------------------------------------------------
功能：    多个属性值同时变化，可以变高，可以变低
输入：    obj:要运动的对象
property:属性名，比如'height'
iTarget：运动结束之后的属性值，比如1000。如果是透明度，100代表全透明。
endFunc(可选):运动结束之后执行的函数
输出：    无
备注：  如果是多物体，那么每个物体都要添加一个全局的timer(定时器)属性
--------------------------------------------------------*/
function startMove(obj, json, endFunc){
clearInterval(obj.timer);//清除定时器，解决对同一个定时器调用startMove定时器叠加的问题
var thisStyle = 0;//此时的样式值
var speed = 0;//移动速度
var bStop = true;//假设，刚开始所有的属性都达到了所设置的属性值
var jsonLength = getJsonLength(json);

obj.timer = setInterval(function(){
/*
每次循环的时候，如果一个属性的值达到设定的目标，则把i加1，
最后检测如果i与json的长度一样，说明每个属性值都达到的目标，
则开启定时器并执行endFunc
*/
var i = 0;
for(var attr in json){
thisStyle = parseFloat(getStyle(obj, attr));
speed = (json[attr] - thisStyle) / 5;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);

if(speed >= 0 && thisStyle >= json[attr]){//从小往大变化的停止条件
i++;
}else if(speed <= 0 && thisStyle <= json[attr]){//从大往小变化的停止条件
i++
}else{//没达到停止的条件，继续运动
if(attr != 'opacity'){//如果不是设置透明度
obj.style[attr] = thisStyle + speed + 'px';
}else{//如果设置透明度
obj.style[attr] = (thisStyle + speed) / 100 ;
obj.style.filter = 'alpha(opacity:' + (thisStyle + speed) + ')';
}
}
}
if(i == jsonLength){
clearInterval(obj.timer);
if(endFunc) {endFunc();}
}
},30);
}

可以看到在Chrome，FF，IE8+下可以完美运行。

我是JS新手，如果有更好，更方便的实现方案，欢迎各位留言交流。

另外：前端求职ing