JS完美运动框架

来源:互联网 发布:肥皂水灌肠的浓度算法 编辑:程序博客网 时间:2024/06/10 18:32
/*----------------------------------------------------------------------------
功能:  获取某个节点下的所有ClassName为'sClass'的元素
输入: 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代表全透明。如:{width:100,height:300}
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);
}
0 0