首页 > 代码库 > js原生简单实现animate操作Css3属性
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>
js原生简单实现animate操作Css3属性
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。