极客教程JavaScript 动画
你可以使用JavaScript创建复杂的动画，其中包括但不限于以下元素−
- 烟花
- 淡入淡出效果
- 滚入或滚出
- 页面淡入或淡出
- 物体移动
你可能对现有的基于JavaScript的动画库感兴趣： Script.Aculo.us .
本教程提供了如何使用JavaScript创建动画的基本理解。
JavaScript可以根据逻辑方程或函数的某种模式在页面中移动许多DOM元素（，
或任何其他HTML元素）。
JavaScript提供了以下两个函数，常用于动画程序中。
- setTimeout( function, duration) − 这个函数在 duration 毫秒后调用 function 。
-
setInterval(function, duration) − 这个函数每隔 duration 毫秒调用一次 function 。
-
clearTimeout(setTimeout_variable) − 这个函数清除通过setTimeout()设置的任何计时器。
JavaScript还可以设置DOM对象的许多属性，包括其在屏幕上的位置。您可以设置对象的top和left属性来将其定位在屏幕上的任何位置。以下是其语法。
// Set distance from left edge of the screen.
object.style.left = distance in pixels or points;
or
// Set distance from top edge of the screen.
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); // call moveRight in 20msec
}
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(); // Preload an image
image1.src = "/images/html.gif";
var image2 = new Image(); // Preload second 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>