js原生简单实现animate操作Css3属性
最近写HTML5+CSS3页面发现Jquery没法操作transform:旋转等一些效果所以自己简单写了个
<script type="text/javascript"> window.onload = function(){var func = function(){ var isdie = false; this.animate = function(obj,name,time){ var arr1 = [‘rotate‘]; if(!isdie){ var num = 0.0000000001; isdie = true; var isCss3 = false; var isdie = true; var isZ = true; for(var o in name){ 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){ 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){ return letter.toUpperCase(); }); return el.currentStyle[style]; }else{ return document.defaultView.getComputedStyle(el, null).getPropertyValue(style) } } } var func = new func(); func.animate(line[3].getElementsByClassName(‘sanjiao‘)[0],{"height":"200px"},1);
// func.animate(要操作的对象,{要操作的属性},变换的速度);
//使用方法和jquery 如果要操作 width height等一些元素直接{"height":"200px"}就可以了如果是css3比如transform:rotate(100deg)就应该这么写{"transform:rotate":"100deg"}
//暂时不支持操作多个属性进行动画效果(待添加!)
//暂时不支持负数(待添加!)
//写的不好还请多多见谅! } </script>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。