21.transform
22.添加transform的处理
23.特殊样式获取、批量设置
21.transform
22.添加transform的处理
/*
css 函数
*/
var transformAttr = [
"rotate",
"rotateX",
"rotateY",
"rotateZ",
"translateX",
"translateY",
"translateZ",
"scale",
"scaleX",
"scaleY",
"skewX",
"skewY"
];
function css(el,attr,val){
if(transformAttr.indexOf(attr) >= 0){
return setTransform(el,attr,val);
}
if(val === undefined){
return parseFloat(getComputedStyle(el)[attr]);
} else {
if(attr == "opacity"){
el.style[attr] = val;
el.style.filter = "alpha(opacity="+(val*100)+")";
} else {
el.style[attr] = val + "px";
}
}
}
function setTransform(el,attr,val){
el.transform = el.transform||{};
if(val === undefined){
return el.transform[attr];
}
el.transform[attr] = val;
var transformVal = "";
for(var s in el.transform){
switch(s){
case "rotate":
case "rotateX":
case "rotateY":
case "rotateZ":
case "skewX":
case "skewY":
transformVal += s+'('+ el.transform[s]+'deg) ';
break;
case "translateX":
case "translateY":
case "translateZ":
transformVal += s+'('+ el.transform[s]+'px) ';
break;
case "scale":
case "scaleX":
case "scaleY":
transformVal += s+'('+ el.transform[s]+') ';
break;
}
}
el.style.WebkitTransform = el.style.transform = transformVal.trim();
}
(function(){
var box = document.querySelector("#box");
css(box,"rotate",0)
css(box,"translateX",0)
// console.log(css(box,"rotate"));
console.log(css(box,"background"));
mTween({
el: box,
attr: {
rotate: 360
},
duration: 800,
cb: function(){
mTween({
el: box,
attr: {
translateX: 100
}
});
}
});
})();
23.特殊样式获取、批量设置
<script>
/*
css 函数
*/
var transformAttr = [
"rotate",
"rotateX",
"rotateY",
"rotateZ",
"translateX",
"translateY",
"translateZ",
"scale",
"scaleX",
"scaleY",
"skewX",
"skewY"
];
var normalAttr = [
"width",
"height",
"left",
"top",
"right",
"bottom",
"marginBottom",
"marginleft",
"marginRight",
"marginTop",
"paddingLeft",
"paddingRight",
"paddingTop",
"paddingBottom"
];
/*
attr:{
width: 100,
height: 200,
background:
}
*/
function css(el,attr,val){
if(typeof attr == "object"){
for(var s in attr){
css(el,s,attr[s]);
}
return ;
}
if(transformAttr.indexOf(attr) >= 0){
return setTransform(el,attr,val);
}
if(val === undefined){
val = getComputedStyle(el)[attr];
return normalAttr.indexOf(attr)>=0||!isNaN(val)?parseFloat(val):val;
} else {
if(attr == "opacity"){
el.style[attr] = val;
el.style.filter = "alpha(opacity="+(val*100)+")";
} else if(normalAttr.indexOf(attr)>=0) {
el.style[attr] = val + "px";
} else if(attr == "zIndex") {
el.style[attr] = Math.round(val);
} else {
el.style[attr] = val;
}
}
}
function setTransform(el,attr,val){
el.transform = el.transform||{};
if(val === undefined){
return el.transform[attr];
}
el.transform[attr] = val;
var transformVal = "";
for(var s in el.transform){
switch(s){
case "rotate":
case "rotateX":
case "rotateY":
case "rotateZ":
case "skewX":
case "skewY":
transformVal += s+'('+ el.transform[s]+'deg) ';
break;
case "translateX":
case "translateY":
case "translateZ":
transformVal += s+'('+ el.transform[s]+'px) ';
break;
case "scale":
case "scaleX":
case "scaleY":
transformVal += s+'('+ el.transform[s]+') ';
break;
}
}
el.style.WebkitTransform = el.style.transform = transformVal.trim();
}
(function(){
var box = document.querySelector("#box");
css(box,{
width: 200,
height: 200,
background: "yellow"
});
})();
</script>