10 JavaScript DOM技术-JavaScript DOM实现动画效果

JavaScriptDOM 实现动画效果

一，动画条件之一 位置

网页元素在浏览器窗口里的位置是一种表示性的信息，通常是由CSS来设置。其属性名为position，包含四个属性值为static、fixed、relative、absolusion。

1，static:：它是默认值，有关的元素将按照他们在标记里先后出现顺序表现在浏览器窗口里。
2，relative：它是和static相似，与之不同的在于它可以通过float属性从文档正常显示顺序里脱离出来
3，absolusion：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。它可以将某元素摆放到容纳该元素的“容器”
   的任何位置，该容器是文档本身或者是被设置为fixed/absolusoin属性的父元素该元素的原始标记里出现的位置与它显示的位置无关，
   它的显示为是由top,bottom,left,right属性来设置，防止它们发生冲突，最佳做法只使用top或只使用bottom属性，left与right同理
4，fixed：生成绝对定位的元素，它可以将元素相对于浏览器窗口进行定位，元素的位置也是通过 "left", "top", "right" 
   以及 "bottom" 属性进行规定。

二，动画条件之二 时间

JavaScript中setTimeout函数是能够让某个函数在经过一段预定时间之后才开始执行，该函数有两个参数，第一个参数通常是字符串，表示需要被执行的函数名，或者编写匿名函数，编写被执行函数作为参数。第二个参数是以毫秒为单位的数值，表示设置的时间。

方式

setTimeout("funtion",interval)

在绝大多数时候，是把这个函数调用赋值给一个变量，其目的是方便取消某个排队等待执行的函数吗，可以用clearTimeout函数来取消队列函数。

方式

variable = setTimeout("funtion",interval)
claerTime(variable）

三，编写moveElement函数

有了以上的两个基础要点就可以来编写一个将文档元素移动动画的通用函数moveElement

function moveElement(elementID,final_x,final_y,interval){
	if(!document.getElementById) return false;
	if(!document.getElementById(elementID)) return false;
	var elem = document.getElementById(elementID);
	// 清除setTimeout里的累积事件
	if(elem.movement){
		clearTimeout(elem.movement);
	}
	// 检查elem元素的left/top是否被设置
	if(!elem.style.left){
		elem.style.left = "0px";
	}
	if(!elem.style.top){
		elem.style.top = "0px";
	}
	// 将top/left字符型换成数值型
	var xpos = parseInt(elem.style.left);
	var ypos = parseInt(elem.style.left);
	var dlist = 0;
	if(xpos == final_x && ypos == final_y){
		return true;
	}
	if(xpos > final_x){
		dlist = Math.ceil((final_x - xpos)/10);
		xpos = xpos + dlist;
	}
	if(xpos < final_x){
		dlist = Math.ceil((xpos - final_x)/10);
		xpos = xpos - dlist;
	}
	if(ypos > final_y){
		dlist = Math.ceil((final_y - ypos)/10);
		xpos = xpos + dlist;
	}
	if(ypos < final_y){
		dlist = Math.ceil((ypos - final_y)/10);
		ypos = ypos - dlist;
	}
	
	elem.style.left = xpos + "px";
	elem.style.top = ypos + "px";
	var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
	elem.movement = setTimeout(repeat,interval);
}