码迷,mamicode.com
首页 > Web开发 > 详细

[f]添加cssTransform属性的方法

时间:2014-11-06 16:41:13      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   color   ar   使用   for   sp   div   

 

添加css3的一些Transform的属性

使用方法:

cssTransform(oDiv[0], ‘scale‘, 300)(‘rotate‘, 300);

ps:可以完成一个变形继续下一个变形;

函数如下:

function cssTransform(obj, attr, value) {
   if (arguments.length == 2) {
       if (attr == ‘scale‘ || attr == ‘rotate‘ || attr == ‘rotateY‘ || attr == ‘translateZ‘) {
           var arr = ["Webkit", "Moz", "O", "ms", ""];
           var sVal = ‘‘;
           if (!obj.$Transform) {
               obj.$Transform = {};
           }
           for (var i = 0; i < arr.length; i++) {
               obj.style[arr[i] + "Transform"] = sVal;
               switch (attr) {
                   case ‘scale‘:
                       sVal = typeof(obj.$Transform[attr]) == ‘number‘ ? obj.$Transform[attr] : 100;
                       break;
                   default:
                       sVal = obj.$Transform[attr] ? obj.$Transform[attr] : 0;
               }
           }



       }
       var sCur = obj.currentStyle ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj, false)[attr];
       if (attr == ‘opacity‘) {
           return parseInt(parseFloat(sCur) * 100);
       } else {
           return parseInt(sCur);
       }
   } else
   if (arguments.length == 3) {
       switch (attr) {
           case ‘scale‘:
           case ‘rotate‘:
           case ‘rotateY‘:
           case ‘translateZ‘:
               setCss3(obj, attr, value);
               break;
           case ‘width‘:
           case ‘height‘:
           case ‘paddingLeft‘:
           case ‘paddingTop‘:
           case ‘paddingRight‘:
           case ‘paddingBottom‘:
               value = Math.max(value, 0);
           case ‘left‘:
           case ‘top‘:
           case ‘marginLeft‘:
           case ‘marginTop‘:
           case ‘marginRight‘:
           case ‘marginBottom‘:
               obj.style[attr] = value + ‘px‘;
               break;
           case ‘opacity‘:
               obj.style.filter = "alpha(opacity:" + value + ")";
               obj.style.opacity = value / 100;
               break;
           default:
               obj.style[attr] = value;
       }
   }
   return function(attr_in, value_in) {
       css(obj, attr_in, value_in)
   };
}

function setCss3(obj, attr, value) {
   var sTr = "";
   var sVal = "";
   var arr = ["Webkit", "Moz", "O", "ms", ""];
   if (!obj["$Transform"]) {
       obj["$Transform"] = {};
   }
   obj["$Transform"][attr] = parseInt(value);
   for (sTr in obj["$Transform"]) {
       switch (sTr) {
           case ‘scale‘:
               sVal += sTr + "(" + (obj["$Transform"][sTr] / 100) + ") ";
               break;
           case ‘rotate‘:
           case ‘rotateY‘:
               sVal += sTr + "(" + (obj["$Transform"][sTr]) + "deg) ";
               break;
           case ‘translateZ‘:
               sVal += sTr + "(" + (obj["$Transform"][sTr]) + "px) ";
               break;
       }
   }
   for (var i = 0; i < arr.length; i++) {
       obj.style[arr[i] + "Transform"] = sVal;
   }
}

 

[f]添加cssTransform属性的方法

标签:style   blog   io   color   ar   使用   for   sp   div   

原文地址:http://www.cnblogs.com/niubenbit/p/4079062.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!