cssTransform.js 优化版三_csstransform.js下载-程序员宅基地

技术标签: cssTransform  html5  js  H5  css3  

终极版,减少参数传递,降低耦合度

function Transform(element) {
    
    var transform = {
    };
    var transformValue = '';
    var props = ['scaleX', 'scaleY','rotate', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', 'translateX', 'translateY', 'translateZ'];
    props.forEach(function (prop) {
    
        if (prop.indexOf('scale') >= 0) {
    
            transform[prop] = 1;
        } else {
    
            transform[prop] = 0;
        }
        Object.defineProperty(element, prop, {
    
            get: function () {
    
                return transform[prop];
            },
            set: function (value) {
    
                transformValue = '';
                transform[prop] = value;
                for (var name in transform) {
    
                    switch (name) {
    
                        case "scaleX":
                        case "scaleY":
                            transformValue += " " + name + "(" + transform[name] + ")";
                            break;
                        case "rotate":    
                        case "rotateX":
                        case "rotateY":
                        case "rotateZ":
                        case "skewX":
                        case "skewY":
                            transformValue += " " + name + "(" + transform[name] + "deg)";
                            break;
                        default:
                            transformValue += " " + name + "(" + transform[name] + "px)";
                    }
                }
                element.style.WebkitTransform = element.style.transform = transformValue;
            }
        });
    })
}

优化点

  1. 调用更加简单
  2. 传参更少
  3. 耦合度极低,扩展性更强

使用(其实还有个优化点,这里要写两行,可以变成一行)


var el = document.querySelector('.abc');
Transform(el);
el.translateX = 150;
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_35942348/article/details/103759589

智能推荐

集合论:容斥原理_集合与容斥原理相关工作评论-程序员宅基地

文章浏览阅读246次。本菜认为这个东西可能可以用到动态规划上,因为动态规划的本质就是集合;先来知道一下结论吧:现有n个集合:a1、a2、a3、a4...an,求a1Ua2Ua3....Uan的元素个数K:则有:其中p[t]为任意t个a类集合交集的个数;所以我们就可以计算每个p[t],然后求和就可以了;下面是一道练习题:下面是代码:#include<iostream>#include<algorithm>#include<math.h>#define._集合与容斥原理相关工作评论

weka up-sampling & down-sampling-程序员宅基地

文章浏览阅读527次。[b]up-sampling:[/b]SMOTE algorithm,over-sampled by creating ``synthetic'' examples rather than by over-sampling with replacement.[b]Weka supervised SMOTE filter [/b]两个参数: [list][*]neares..._weka oversampled

Java基础知识复习第四天1、继承 2、方法重写与重载 3、多态 4、抽象类、 5、封装 6、接口 7、枚举_1. 学习继承的实现 2. 编写多态实例 3. 学习抽象类的使用 4. 学习接口的使用 二.-程序员宅基地

文章浏览阅读178次。标题:Java基础知识复习第四天学习内容:1、继承2、方法重写与重载3、多态4、抽象类、5、封装6、接口7、枚举内容详情:一、继承继承的特性子类拥有父类非 private 的属性、方法。子类可以拥有自己的属性和方法,即子类可以对父类进行扩展。子类可以用自己的方式实现父类的方法。Java 的继承是单继承,但是可以多重继承,单继承就是一个子类只能继承一个父类,多重继承就是,例如 A 类继承 B 类,B 类继承 C 类,所以按照关系就是 C 类是 B 类的父类,B 类是 A 类的父_1. 学习继承的实现 2. 编写多态实例 3. 学习抽象类的使用 4. 学习接口的使用 二.

PHP通过QrReader类对二维码进行解码得到相应的字符串-程序员宅基地

文章浏览阅读1.5k次。PHP通过QrReader类对二维码进行解码得到相应的字符串安装通过 Composer安装 qrcode-detector-decodercomposer require khanamiryan/qrcode-detector-decoder代码案例use Zxing\QrReader;$qrcode = new QrReader("二维码位置");..._php 从二维码中截取字符

国产化服务器--统信系统--打包解压文件_统信系统解压缩-程序员宅基地

文章浏览阅读1.1k次。打包文件tar zcvf xxx.tar.gz xxx解压文件tar zxvf xxx.tar.gz_统信系统解压缩

linux 下vi-程序员宅基地

文章浏览阅读100次。Linux系统提供了一个完整的编辑器家族系列,如Ed、Ex、Vi和Emacs等,按功能它们可以分为两大类:行编辑器(Ed、Ex)和全屏幕编辑器(Vi、Emacs)。行编辑器每次只能对一行进行操作,使用起来很不方便。而全屏幕编辑器可以对整个屏幕进行编辑,用户编辑的文件直接显示在屏幕上,修改的结果可以立即看出来,克服了行编辑的那种不直观的操作方式,便于用户学习和使用,具有强大的功能。linux..._linux系统提供了一个完整的编辑器家族系列,如ed、ex、vi和emacs等

随便推点

Android getSystemService_getsystemservice 官方文档-程序员宅基地

文章浏览阅读1.1k次。在android中有一些服务是得通过系统来得的,下面一整个的SystemService ,在android的官方文档中大家 可以到Context这个类下去找,SummaryConstants String ACCESSIBILITY_SERVICE Use with getSystemService(String) to retrieve a Acces..._getsystemservice 官方文档

BZOJ4564 [Haoi2016]地图_haoi2016 地图-程序员宅基地

文章浏览阅读1.6k次。仙人掌转成序列,然后莫队仙人掌转成序列的方法是先tarjan找环,对于一个环上的点,如果是环根,那么这个环都属于其子仙人掌,如果不是环根,那么除了他自己这个环上都不是其子仙人掌,这样再dfs一次,对于一个点,优先走其出边里是其子仙人掌的部分,同时对于一个环,把不与环根相连的点的siz加到环根的siz里,这样仙人掌就转成了序列,一个子仙人掌对应的区间就是dfn[x]~dfn[x]+siz[x]-_haoi2016 地图

指定计算机上虚拟磁盘位置,管理虚拟硬盘 (VHD)-程序员宅基地

文章浏览阅读2.8k次。管理虚拟硬盘 (VHD)10/12/2017本文内容适用于: Windows 10、Windows 8.1、Windows Server(半年频道)、Windows Server 2016、Windows Server 2012 R2、Windows Server 2012本主题介绍如何通过磁盘管理来创建、附加和分离虚拟硬盘。 虚拟硬盘 (VHD) 是虚拟化的硬盘文件,装载后,其外观和运行方式与物..._电脑怎么设置虚拟硬盘路径

字节跳动面试题求叶子节点到叶子节点的最大距离_vector <employeenode*> children;-程序员宅基地

文章浏览阅读253次。题目:给一个类似树的结构,每个节点都可以有多个节点(不止两个树)然后每个根节点和字节点间的路径不一样,求叶子结点到叶子结点的最大路径class Node {public: int val; vector<Node*> children; Node() {} Node(int _val) { val = _val; } Node(int _val, vector<Node*> _children) { _vector children;

ArcGIS教程:ArcGIS中的坐标系统定义与投影转换_arcgis数据转换平面投影-程序员宅基地

文章浏览阅读8.5w次,点赞31次,收藏149次。 坐标系统是GIS数据重要的数学基础,用于表示地理要素、图像和观测结果的参照系统,坐标系统的定义能够保证地理数据在软件中正确的显示其位置、方向和距离,缺少坐标系统的GIS数据是不完善的,因此在ArcGIS软件中正确的定义坐标系统以及进行投影转换的操作非常重要。1. ArcGIS中的坐标系统 ArcGIS中预定义了两套坐标系统,地理坐标系(Geographic c..._arcgis数据转换平面投影

BZOJ4556 [Tjoi2016&Heoi2016]字符串_bzoj'4556-程序员宅基地

文章浏览阅读1.4k次。恩,我们进行一些瞎YY,首先询问s[a~b]的所有子串与S[c~d]的最长LCP其实相当于询问s[a~b]的所有后缀与s[c~d]的最长LCP进一步转化设suf[i]表示S的从第i个字符开始的后缀,则其实相当于询问这个可以把d-c+1提到外面,就变成这样只需要考虑左面的,考虑若答案为l(lb-l+1的位置,而在a=l,那么s[i~b]就是一个与s[c~d]有长度为l的LCP的子_bzoj'4556

推荐文章

热门文章

相关标签