zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    递归调用简单的讲解
    有关杭电acm问题的分类
    【jquery】切换标题与内容/点击后动态切换当前状态
    将数组某键值抽出作为新数组
    table表格制作
    如何导入大sql文件到mysql数据库
    二维数组按照某一键值进行排序
    利用PHP输出某一目录所有文件
    php结合js动态获取空间时间
    ie6不支持minheight的解决方案
  • 原文地址:https://www.cnblogs.com/dsphper/p/4216442.html
Copyright © 2011-2022 走看看