原生js封装transformCSS.js

最新推荐文章于 2023-03-24 09:05:19 发布

拎壳儿跑的蜗牛

最新推荐文章于 2023-03-24 09:05:19 发布

阅读量3.8k

点赞数 1

分类专栏： JavaScript 文章标签： transform 封装原生transformCSS.js方法封装

本文链接：https://blog.csdn.net/q761830908/article/details/100901249

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

原生transformCSS.js方法封装

transform属性

CSS3中，transform属性允许盒子模型被进行二维或三维空间坐标的变换。使用该属性之后，元素主要可以进行以下变换：

旋转(rotate)
平移(translate)
缩放(scale)
倾斜(skew)

开始transform原生封装

transform函数可以获取我们自己设置的transform属性 transform(node,“type”)

transform函数可以设置transform属性： transform（node,“type”,val）

效果示意图

在这里插入图片描述

代码实现

css部分代码

    <style>
        #box1,
        #box2 {
            font-size: 15px;
            transition: all 1s;
        }
    </style>

html部分代码

<body>
    <button id="btn">点击改变transform</button>
    <div id="box1"><img src="holder.js/100x100?auto=yes&theme=vine&text=box1"></div>
    <div id="box2"><img src="holder.js/100x100?auto=yes&theme=sky&text=box2"></div>

js部分代码

引入图片占位生成器：
<script src="./holder.js"></script>

声明变量绑定时间：
        var oBox1 = document.getElementById("box1");
        var oBox2 = document.getElementById("box2");
        var oBtn = document.querySelector("#btn");

        oBtn.addEventListener('click', function () {
            transform(oBox1, "translateX", "400");
            console.log(transform(oBox1, "translateX")); //400
        })

        oBtn.addEventListener('click', function () {
            transform(oBox2, "rotate", "-90");
        })

注：传参(node,name,value) node为元素 name为tranform属性 value为值。

封装函数：
        function transform(node, type, val) {
    1.判断是否含有动画 创建对象 
            if (typeof node === "object" && typeof node["transform"] === "undefined") {
                node["transform"] = {};
            }
    2.判断读和写 通过argument.length的值判断
        1.将属性存入对象中 
        2.使用for in 遍历对象 
        3. switch判断属性
        4.返回对象中对应的属性值
            // 如果传递的参数是3个，那么就是设置
            if (arguments.length >= 3) {
                //设置
                node["transform"][type] = val;
                var text = "";

                for (var item in node["transform"]) {
                    switch (item) {
                        case "translateY":
                        case "translateX":
                            text += item + "(" + node["transform"][item] + "px) ";
                            break;
                        case "rotate":
                        case "rotateX":
                        case "rotateY":
                        case "skewX":
                        case "skewY":
                            text += item + "(" + node["transform"][item] + "deg) ";
                            break;
                        case "scaleX":
                        case "scaleY":
                            text += item + "(" + node["transform"][item] + ") ";
                            break;
                    }
                }

                node.style.transform = text;
            } else if (arguments.length == 2) {
                //读取
                val = node["transform"][type];
                if (typeof val === "undefined") {
                    switch (type) {
                        case "translateX":
                        case "translateY":
                        case "skewX":
                        case "skewY":
                        case "roateX":
                        case "roateY":
                        case "roate":
                            val = 0;
                            break;
                        case "scaleX":
                        case "scaleY":
                            val = 1;
                            break;
                    }
                }
                return val;
            }
        }
    </script>
</body>

transformCSS.js方法封装

(function (w) {
    /**
     * @param node  元素对象
     * @param prop  样式名称
     * @param value 样式的值 不带单位
     *
     * @example setting   transformCSS(box, 'translateX', 300);
     * @example setting   transformCSS(box, 'rotate', 90);
     * @example setting   transformCSS(box, 'scale', 3);
     * @example reading   transformCSS(box, 'translateX');
     * @returns {number|*}
     */
    function transformCSS(node, prop, value) {
        //判断创建一个数据仓库
        if (node.store === undefined) {
            node.store = {};
        }

        //如果是三个参数
        if (arguments.length == 3) {
            //设置
            // node.style.transform = prop + '('+value+'px)';
            // px   deg
            node.store[prop] = value;
            //初始化字符串
            var cssStr = '';
            for (var i in node.store) {
                // i    translate   rotate   scale
                switch (i) {
                    case 'translate':
                    case 'translateX':
                    case 'translateY':
                        cssStr += i + '(' + node.store[i] + 'px) ';
                        break;
                    case 'rotate':
                    case 'rotateX':
                    case 'rotateY':
                    case 'rotateZ':
                        cssStr += i + '(' + node.store[i] + 'deg) ';
                        break;
                    case 'scale':
                    case 'scaleX':
                    case 'scaleY':
                        cssStr += i + '(' + node.store[i] + ') ';
                        break;
                }
            }
            node.style.transform = cssStr;
        }
        //如果是两个参数
        if (arguments.length == 2) {
            //获取  translateX
            //如果有
            if (node.store[prop]) {
                return node.store[prop];
            } else {
                //如果没有   translate 0  rotate 0  scale scaleX scaleY  1
                if (prop.substr(0, 5) == 'scale') {
                    return 1;
                } else {
                    return 0;
                }
            }
        }
    }
    //赋值
    w.transformCSS = transformCSS;
})(window);