标签：
在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息，用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具。但是有一个应用领域是目前的CSS无能为力的。如果我们想随着时间的变化而不断改变某个元素的样式,则只能用JavaScript。JavaScript能够按照预定的时间间隔重复的调用一个函数,而意味着我们可以随着时间的推移而不断改变某个元素的样式。
动画是样式随着时间变化的完美例子之一。简单的说，动画就是让元素的位置随着时间而不断的发生变化。下面来说下使用JavaScript动画,必须要掌握的几个HTML的基本知识:
一、位置
网页元素在浏览器窗口中的位置是一种表示性的信息。因此,位置信息通常使用CSS负责设置的。下面这段CSS代码对某个元素在网页上的位置做了预定:
element{ position:absolute; top:50px; left:100px; }
position属性的合法值有static、absolute、relative、fixed四种。
1、static是position属性的默认值，意思是有关元素将按照它们在标记里出现的先后顺序出现在浏览器窗口里。
2、relative的含义与static相似，区别是postion属性为relative的元素还可以(通过应用float属性)从文档的正常显示顺序中脱离出来。
3、如果一个元素的position属性设为absolute时，我们就可以把它摆到容纳它的"容器"的任何位置。这个容器要么是文档本身,要么是一个有着fixed或absolute属性的父元素。他的显示位置由top、left、right、bottom四个属性决定和他本身在文档中的位置无关。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> </style> </head> <body> <p id="message">Whee!</p><!--(使兴奋,使激动,啊)!--> <script type="text/javascript"> //通过js来设置<p>标签的初试显示位置 function positionMessage() { if (!checkCompatibility) return; var ele = document.getElementById("message"); ele.style.position = "absolute"; ele.style.top = "100px"; ele.style.left = "50px"; } //通过style属性改变<p>标签的显示位置 function moveMessage() { var ele = document.getElementById("message"); ele.style.left = "200px"; } var loadeventlist = [positionMessage, moveMessage]; addOnloadEventlist(loadeventlist); //给window.onload事件绑定函数数组 这个函数数组将在页面全部加在完毕之后被调用 function addOnloadEventlist(eventlist) { if (!eventlist) return false; var oldonload = window.onload; window.onload = function () { for (var i = 0; i < eventlist.length; i++) { eventlist[i](); } } } //检查浏览器对DOM方法的支持 function checkCompatibility() { if (!document.getElementById) return false; if (!document.createElement) return false; if (!document.createTextNode) return false; if (!document.getElementsByTagName) return false; if (!document.getElementsByName) return false; return true; } </script> </body> </html>
上面这段代码,我们看不到任何动画效果,因为我们的JavaScript太有效率了；函数一个接一个的执行.期间根本没有我们能察觉的间隔。
所以为了实现动画效果,我们必须创造出时间间隔来,而这正是实现动画效果的关键！所以我们来说下时间动画效果的第二个要素时间！
二、时间
1、setTimeut()函数 他能够让某个函数在经过一段预定的时间之后才开始执行。这个函数有两个参数：第一个参数是一个字符串,其内容是将要执行的那个函数的名字。第二个参数是一个数值，他以毫秒为单位设定了需要经过多长时间才开始执行第一个参数所给出的函数。
setTimeout("functionExample",interval) //interval时间间隔 是一个数值
但是这样写名称为functionExample的函数,将会一直被调用而不会停止,所以正确的代码应该这样写,除非你是打算让他一直被调用!
var para=setTimeout("functionExample",interval);
这样将把对functionExample函数的调用赋值给para变量，这样如果我们想取消正在排队等待执行的函数,就可以这样做
clearTimeout(para);
标签：
原文地址：http://www.cnblogs.com/GreenLeaves/p/5758360.html
