JavaScript运动函数

DOM对象在页面中的运动效果

  DOM对象在页面中有位置（left/top）、宽高（width/height）、透明度（opacity）等属性的变化。封装一个适用的运动函数，使用时只需引入即可。

封装的运动函数

  封装的运动函数，存放在startMove.js文件中，使用时只需引入到当前页面。

// 获取样式的兼容性代码
/**
 * domobj 指dom对象
 * attr 指要获得属性名
 */
function getStyle(domobj, attr) {
	if(window.getComputedStyle) {
		return getComputedStyle(domobj, null)[attr];
	}
	return domobj.currentStyle[attr];
}
/*
参数
 *obj指dom对象 
 *json->{"width":500,"height":500}
 *fn指之前属性变完之后，要执行的代码
 * */
function startMove(obj,json,fn){
	// 先清除定时器，再添加，保证每次只有一个定时器
	clearInterval(obj.timer);
	
	obj.timer = setInterval(function(){
		
		var flag = true;//假设当前值达到目标值了
		
		for(var attr in json){
			// 得到当前属性值
			if(attr == "opacity"){
				var iCur = parseInt(getStyle(obj,"opacity")*100);
			}else{
				var iCur = parseInt(getStyle(obj,attr));
			}
			// 得到目标值
			var iTarget = json[attr];
			
			// 得到每次运动的变化距离
			var iSpeed = (iTarget-iCur)/8;
			iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
			
			// 设置要运动的属性为当前值加变化值
			if(attr == "opacity"){
				obj.style.opacity = (iCur+iSpeed)/100;
				obj.style.filter = "alpha(opacity="+(iCur+iSpeed)+")";
			}else{
				obj.style[attr] = iCur + iSpeed + "px";
			}

			if(iSpeed != 0){
				//只要有一个属性没有达到目标值，flag就为false
				flag = false;
			}
			
		}
		
		// 如果每个属性都达到目标值，flag为true
		if(flag){
			clearInterval(obj.timer);
			// 如果传进来的参数有fn,执行fn
			if(fn){
				fn();
			}
		}
		
	},20);
	
}

同一DOM属性的不同属性同时发生变化

HTML结构，放置一个div

<div></div>

CSS样式，设置宽高背景色

<style type="text/css">
	div{
		width: 100px;
		height: 100px;
		background: red;
	}
</style>

JS代码
   引入startMove.js文件，再给div写鼠标移入移出事件
   移入时，宽高同时变化，宽变为400，高变为500
   移出时，宽高同时变化，都变化为100

<script src="startMove.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var oDiv = document.querySelectorAll("div")[0];
	oDiv.onmouseover = function(){
		startMove(oDiv,{"width":400,"height":500});
	}
	oDiv.onmouseout = function(){
		startMove(oDiv,{"width":100,"height":100});
	}
</script>

同一DOM属性的不同属性依次发生变化

HTML、CSS都和上面的一样，只有JS代码不同，使用如下写法，可使宽度先变化为300，高度再变化为400

<script type="text/javascript">
	var oDiv = document.querySelectorAll("div")[0];
	oDiv.onmouseover = function() {
		startMove(oDiv, {"width": 300}, function() {
			startMove(oDiv, {"height": 400});
		});
}
</script>