添加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;
}
}
}