• 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>
  • 相关阅读:
    18个Java开源CMS系统一览
    冒泡排序
    数据挖掘十大经典算法
    开源Java CMS建站程序推荐
    Oracle
    Oracle Procedure returning Ref Cursor in Entity Framework 4
    Field_II
    SharePoint Video Library
    ORACLE 导入dmp文件
    System.Diagnostics.Process.Start()。它的作用是调用外部的命令
  • 原文地址:https://www.cnblogs.com/dsphper/p/4216442.html
Copyright © 2020-2023  润新知