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>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。