自定义变换（transform）组件

最新推荐文章于 2023-07-10 09:15:28 发布

原创最新推荐文章于 2023-07-10 09:15:28 发布 · 492 阅读

CC 4.0 BY-SA版权

该博客介绍了一个自定义的JavaScript函数szxt.transformCss，用于处理DOM节点的CSS变换属性。函数接受一到三个参数，当传入三个参数时，用于设置变换值，如transformX, transformY, scale和rotate；当传入两个参数时，用于获取变换值。通过这个函数，可以便捷地操作元素的变换效果。" 114594649,10736824,Python基础教程：运算符详解,"['Python基础', 'Python语法', '运算符']

szxt.transformCss = function(node,type,val){
   if(typeof node == 'object' && node['transform'] === 'undefined'){
       node['transform'] = {};
   }

//如果是三个参数时，那么则是设置变换值
   if(arguments.length>=3){
       var text = "";
       node['transform'][type] = val;
       for(item in node['transform']){
           if(node['transform'].hasOwnProperty(item)){
               switch (item){
                   case "transformX":
                   case "transformY":
                       text+=item+"("+node['transform'][item]+"px)";
                       break;
                   case "scale":
                       text+=item+"("+node['transform'][item]+")";
                       break;
                   case "rotate":
                       text+=item+"("+node['transform'][item]+"deg)";
               }
           }
       }
       node.style.transform = node.style.webkitTransform = text;

//如果是两个参数时，那么则是获取变换值
   }else if(arguments.length == 2){
       val = node['transform'][type];
       if(typeof val === 'undefined'){
           switch(val){
               case "transformX":
               case "transformY":
               case "scale":
                   val = 1;
                   break;
               case "rotate":
                   val = 0;
           }
       }
       return val;
   }
}