JavaScript动画
你可以使用JavaScript创建具有但不限于以下元素的复杂动画：
烟花
淡入淡出效果
滚入或滚出
页内或页外
物体运动
本教程对如何使用JavaScript创建动画有基本的了解。
JavaScript可用于根据逻辑方程式或函数确定的某种模式在页面上移动许多DOM元素(，
或任何其他HTML元素)。
JavaScript提供了以下两个在动画程序中经常使用的功能。
setTimeout(function，duration)：该函数在从现在开始的持续时间毫秒后调用函数。
setInterval(function，duration)：该函数调用function每次之后duration毫秒。
clearTimeout(setTimeout_variable)：此函数调用清除由setTimeout()函数设置的任何计时器。
JavaScript还可以设置DOM对象的许多属性，包括其在屏幕上的位置。你可以设定 top 和对象的left属性将其放置在屏幕上的任何位置。这是它的语法。
//设置距屏幕左边缘的距离。 object.style.left = distance in pixels or points; or //设置距屏幕顶部边缘的距离。 object.style.top = distance in pixels or points;
手动动画
因此，让我们使用DOM对象属性和JavaScript函数来实现一个简单的动画，如下所示。以下列表包含不同的DOM方法。
我们正在使用JavaScript函数getElementById()获取DOM对象，然后将其分配给全局变量imgObj.
我们定义了一个初始化函数init()初始化imgObj我们已经设定了position和left属性。
在窗口加载时，我们正在调用初始化函数。
最后，我们在调用moveRight()函数将左侧距离增加10个像素。你也可以将其设置为负值，以将其移至左侧。
请尝试以下示例。
<html>
<head>
<title>JavaScript Animation</title>
<script type = "text/javascript">
<!--
var imgObj = null;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload = init;
//->
</script>
</head>
<body>
<form>
<img id = "myImage" src = "/images/html.gif" />
<p>Click button below to move the image to right</p>
<input type = "button" value = "Click Me" onclick = "moveRight();" />
</form>
</body>
</html>自动化动画
在上面的示例中，我们看到了图像如何在每次单击时向右移动。我们可以通过使用JavaScript函数来自动执行此过程setTimeout()如下：
在这里，我们添加了更多方法。那么，让我们看看这里有什么新内容：
moveRight()函数正在调用setTimeout()设定位置的功能 imgObj .
我们增加了一个新功能stop()清除计时器设置setTimeout()功能并将对象设置在其初始位置。
尝试下面的示例代码。
<html>
<head>
<title>JavaScript Animation</title>
<script type = "text/javascript">
<!--
var imgObj = null;
var animate ;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight,20); //在20毫秒内调用moveRight
}
function stop() {
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload = init;
//->
</script>
</head>
<body>
<form>
<img id = "myImage" src = "/images/html.gif" />
<p>Click the buttons below to handle animation</p>
<input type = "button" value = "Start" onclick = "moveRight();" />
<input type = "button" value = "Stop" onclick = "stop();" />
</form>
</body>
</html>鼠标事件进行翻转
这是一个简单的示例，显示了带有鼠标事件的图像翻转。
在下面的示例中，让我们看看我们正在使用什么：
加载此页面时，“ if”语句检查图像对象的存在。如果图像对象不可用，则将不执行该块。
Image()构造函数创建并预加载一个新的图像对象，称为image1.
src属性被分配了名为/images/html.gif的外部图像文件的名称。
同样，我们创建了image2对象，并在此对象中分配了/images/http.gif。
＃(井号)会禁用链接，以使浏览器在单击时不会尝试转到URL。该链接是图像。
onMouseOver当用户的鼠标移到链接上时，事件处理程序将触发onMouseOut当用户的鼠标离开链接(图像)时，将触发事件处理程序。
当鼠标移到图像上时，HTTP图像从第一个图像更改为第二个图像。将鼠标移离图像时，将显示原始图像。
当鼠标移离链接时，初始图像html.gif将重新出现在屏幕上。
<html>
<head>
<title>Rollover with a Mouse Events</title>
<script type = "text/javascript">
<!--
if(document.images) {
var image1 = new Image(); //预载图片
image1.src = "/images/html.gif";
var image2 = new Image(); //预加载第二张图片
image2.src = "/images/http.gif";
}
//->
</script>
</head>
<body>
<p>Move your mouse over the image to see the result</p>
<a href = "#" onMouseOver = "document.myImage.src = image2.src;"
onMouseOut = "document.myImage.src = image1.src;">
<img name = "myImage" src = "/images/html.gif" />
</a>
</body>
</html>