cssTransform.js(获取transfrom相关属性的值)封装函数

需要注意的是:

如果想要使用该封装函数获取transform相关的属性,那么transform相关的设置,也必须是通过该方法设置的

使用介绍:分为取值和赋值,如果有val值,则为赋值,没有则为取值

调用:

获取transfrom相关属性的值,cssTransform(element,attr)

设置transform相关属性的值:cssTransform(element,attr,val)


参数说明:

element:要进行动画的元素

attr:运动的属性(包括scale系列,translate系列,skew系列)

val:运动的属性的值,比如30deg,100px啦等等(当然不用带单位哦)

!注意:如果attr是放大缩小(scale),我们想要放大2倍,val写为200,放大0.5倍,val写50(下面我们处理的时候会除以100)

使用如下:

cssTransform(obj,'rotate',30);
cssTransform(obj,'scale',200);//放大2倍

cssTransform.js封装函数如下

function cssTransform(element, attr, val){
//下面分为取值和赋值阶段,如果val不存在说明是取值的,如果val存在,说明是赋值阶段
//取值阶段
	if(!element.transform){
		element.transform = {};
	}	
	if(typeof val === "undefined"){ 
//取值阶段,又要分为,该值已经有了,和初始化该值阶段
		if(typeof element.transform[attr] === "undefined"){
			switch(attr){
				case "scale":
				case "scaleX":
				case "scaleY":
				case "scaleZ":
					element.transform[attr] = 100;
					break;
				default:
					element.transform[attr] = 0;	
			}
		} 
//取值完毕,返回该值
		return element.transform[attr];
	} else {
//下面为赋值阶段
		element.transform[attr] = val;
		var transformVal  = "";
//因为transform对象中可能不止一个属性,所以要对其进行遍历

		for(var s in element.transform){
			switch(s){
				case "scale":
				case "scaleX":
				case "scaleY":
				case "scaleZ":
					transformVal += " " + s + "("+(element.transform[s]/100)+")";
					break;
				case "rotate":
				case "rotateX":
				case "rotateY":
				case "rotateZ":
				case "skewX":
				case "skewY":
					transformVal += " " + s + "("+element.transform[s]+"deg)";
					break;
				default:
					transformVal += " " + s + "("+element.transform[s]+"px)";				
			}
		}
		element.style.WebkitTransform = element.style.transform = transformVal;
	}
}

猜你喜欢

转载自blog.csdn.net/lhjuejiang/article/details/80514094