[f]添加css3动画的方法

 添加css3的一些动画的属性

使用方法：

css3(oDiv[0], 'scale', 300)('rotate', 300);
css3(oDiv[0], 'animation', '"dd" .50s ease-in-out 0s');

ps：可以完成一个变形继续下一个变形；

　　dd为具体动画的样式；

@-webkit-keyframes 'dd' {

        0% { -webkit-transform:rotate(0deg);

    }

        50% {-webkit-transform:rotate(40deg);

    }

        100% {-webkit-transform:roate(70deg);

    }

}

 

函数如下： 

function css3(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':

      case 'animation':

        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"] = {};

  }

  if (attr == 'animation') {

    for (var i = 0; i < arr.length; i++) {

      obj.style[arr[i] + 'Animation'] = value;

    }

  } else {

    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;

    }

  }

}