animate用法 js原生_js原生简单实现animate操作Css3属性

isdie= true;var isCss3 = false;var isdie = true;var isZ = true;for(var o inname){if(o.indexOf(':') > 0){

isCss3= true;

O= o.split(":");

}if(isCss3){var num = parseFloat(obj.style[""+O[0]+""].match(/([0-9])+/, ""));

}else{var num = parseFloat(func.getStyle(obj,""+o+"").match(/([0-9])+/, ""));

}//alert(num)

if(!num){var num = 0;

}var Interval = setInterval(function(){if(parseFloat(name[o]) >num){

num+=0.9876543210;

}else if(parseFloat(name[o])

num-=0.9876543210;

isZ= false;

}else{

num= 0;

}//alert(num);

if(isCss3){var val = O[1]+"("+num+name[o].replace(/[(\d+)||(\d+.\d+)]+/,"")+")";

obj.style[""+O[0]+""]=val;

}else{var val = ""+num+name[o].replace(/[(\d+)||(\d+.\d+)]+/,"")+"";

obj.style[""+o+""]=val;

}//alert(val);

if(num > name[o].replace(/([a-z])+/, "") && isZ || num < name[o].replace(/([a-z])+/, "") && !isZ){

isdie= false;

clearInterval(Interval);if(isCss3){

obj.style[""+O[0]+""]=O[1]+"("+name[o].replace(/([a-z])+/, "")+name[o].replace(/[(\d+)||(\d+.\d+)]+/,"")+")";

}else{

obj.style[""+o+""]=""+name[o].replace(/([a-z])+/, "")+name[o].replace(/[(\d+)||(\d+.\d+)]+/,"")+"";

}

}

},time);

}

}return this;

}this.inarray = function(b,a){for (var i = 0; i <= a.length - 1; i++) {if(a[i] ==b){return true;

}return false;

};

}this.getStyle = function(el, style){if(!+"\v1"){

style= style.replace(/\-(\w)/g, function(all, letter){returnletter.toUpperCase();

});returnel.currentStyle[style];

}else{return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)

}

}

}var func = newfunc();func.animate(line[3].getElementsByClassName('sanjiao')[0],{"height":"200px"},1);

//func.animate(要操作的对象,{要操作的属性},变换的速度);

//使用方法和jquery 如果要操作 width height等一些元素直接{"height":"200px"}就可以了如果是css3比如transform:rotate(100deg)就应该这么写{"transform:rotate":"100deg"}

//暂时不支持操作多个属性进行动画效果(待添加!)

//暂时不支持负数(待添加!)

//写的不好还请多多见谅!

}