DOM动画效果基础知识总结

位置

CSS

1. /*把element元素摆放在距离浏览器窗口的左边界100像素，距离浏览器窗口的上边界50像素的位置上。*/

2. element {

3. position: absolute;

4. top:50px;

5. left:100px;

6. }

7. DOM

1. element.style.position = "absolute";

2. element.style.left = "100px";

3. element.style.top = "50px";

position属性的合法值有static、fixed、relative、absolute四种。static是position属性的默认值，意思是有关元素将按照它们在标记里出现的先后顺序出现在浏览器窗口里。relative的含义与static相似，区别是position属性等于relative的元素还可以（通过应用float属性）从文档的正常显示顺序里脱离出来。

如果把某个元素的position属性设置为absolute，我们就可以把它摆放到容纳它的容器的任何位置。这个容器要么是文档本身，要么是一个有着fixed或absolute属性的父元素。这个元素在原始标记里出现的位置与它的显示为位置无关，因为他的显示由top，left，right和botton等属性决定。你可以使用像素或百分比作为单位设置这些属性的值。

<p id="message">Whee!</p>

1. function positionMessage() {

2. if(!document.getElementById) return false;

3. if(!document.getElementById("message")) return false;

4. var elem = document.getElementById("message");

5. elem.style.position = "absolute";

6. elem.style.left = "50px";

7. elem.style.top = "100px";

8. // body...

9. }

10. addLoadEvent(positionMessage);

• 时间

js函数setTimeout能够让某个函数在经历过一段预定的时间之后才开始执行。这个函数带有两个参数：第一个参数通常是一个字符串，其内容是将要执行的那个函数的名字；第二个参数是一个数值，它以毫秒为单位设定了需要经过多长时间后开始执行第一个参数所给出的函数:

setTimeout("function",interval)

在绝大多数时候，把这个函数调用赋值给一个变量将是一个好主意：

variable = setTimeout("function",interval)

如果想要取消某个正在排队等待执行的函数，就必须事先像上面这样把setTimeout函数返回值赋值给一个变量。你可以用一个clearTimeout的函数来取消等待执行队列里的某个函数。这个函数需要一个参数-----保存着某个setTimeout函数调用返回值得变量：

clearTimeout(variable)

修改positionMessage函数，让它5秒之后再去调用moveMessage函数：

1. function positionMessage() {

2. if(!document.getElementById) return false;

3. if(!document.getElementById("message")) return false;

4. var elem = document.getElementById("message");

5. elem.style.position = "absolute";

6. elem.style.left = "50px";

7. elem.style.top = "100px";

8. movement = setTimeout("moveMessage()",500);

9. // body...

10. }

11.  

12. function moveMessage(){

13. var elem = document.getElementById("message");

14. elem.style.left = "200px"

15. }

16. addLoadEvent(positionMessage);

• 时间递增

1. function positionMessage() {

2. if(!document.getElementById) return false;

3. if(!document.getElementById("message")) return false;

4. var elem = document.getElementById("message");

5. elem.style.position = "absolute";

6. elem.style.left = "50px";

7. elem.style.top = "100px";

8. movement = setTimeout("moveMessage()",10);

9. // body...

10. }

11.  

12. function moveMessage(){

13. var elem = document.getElementById("message");

14. //获得元素的当前位置

15. var xpos = parseInt(elem.style.left);

16. var ypos = parseInt(elem.style.top);

17. if(xpos == 200 && ypos == 100)

18. {

19. return true;

20. }