当前位置 : 主页 > 网络编程 > JavaScript >

运动函数的封装(多个属性).js

来源:互联网 收集:自由互联 发布时间:2021-06-30
运动函数的封装(多个属性).js //此运动只能用在样式值为数值的样式;json数据输入的是样式名和目标样式function animate(obj,json,fn){var sss = 40;clearInterval(obj.timer);obj.timer = setInterval(functi
运动函数的封装(多个属性).js
//此运动只能用在样式值为数值的样式;json数据输入的是样式名和目标样式
	function animate(obj,json,fn){
		var sss = 40;
		clearInterval(obj.timer);
		obj.timer = setInterval(function(){
			var flag = true;
			for(var attr in json){
				var current = 0;
				if (attr == "opacity") {
					console.log(getStyle(obj,attr));
					current = getStyle(obj,attr)*100 || 0;
					var step = (json[attr] * 100 - current) / 10;
				}else{
					current = parseInt(getStyle(obj,attr));
					var step = (json[attr] - current) / 10;
				}
		
				 
				step = step > 0 ? Math.ceil(step) : Math.floor(step);


				if(attr == "opacity"){
					if( "opacity" in obj.style ){
						obj.style[attr] = (current + step) / 100; 
					}else{

						obj.style.filter = "alpha(opacity="+ current + step +")";
					}
				}else{
					obj.style[attr] = current + step + "px"; 
				}

				if (current != json[attr]) {
					flag = false;
				};	
			}
			if(flag){
				clearInterval(obj.timer);
				if(fn){
					fn();
				}else{
				console.log("1"+fn);
				}
			}
		},30)
	}
	function getStyle(obj,attr){ //注意:ie8以下,对于没有直接定义opactiy值时,getStyle(obj,attr)返回的是undefine
		if(obj.currentStyle) //ie等
		{
			return obj.currentStyle[attr];
		}else{
			return window.getComputedStyle(obj,null)[attr]; //w3c
		}
	}
网友评论