JavaScript - 动画
你可以使用 JavaScript 创建复杂的动画，包括但不限于以下元素 −
- 烟花
- 渐隐效果
- 滚动进入或滚动退出
- 页面进入或页面退出
- 对象移动
你可能对现有的基于 JavaScript 的动画库感兴趣：Script.Aculo.us。
本教程提供了使用 JavaScript 创建动画的基本理解。
JavaScript 可以用来根据由逻辑方程或 function 决定的某种模式，在页面上移动多个 DOM 元素（<img />、<div> 或任何其他 HTML 元素）。
JavaScript 提供了以下两个在动画程序中经常使用的 function。
setTimeout( function, duration) − 该 function 在当前时间起 duration 毫秒后调用 function。
setInterval(function, duration) − 该 function 每隔 duration 毫秒调用一次 function。
clearTimeout(setTimeout_variable) − 该 function 清除由 setTimeout() function 设置的任何定时器。
JavaScript 还可以设置 DOM 对象的多个属性，包括其在屏幕上的位置。你可以设置对象的 top 和 left 属性，将其定位到屏幕上的任意位置。以下是其语法。
// 设置距离屏幕左边缘的距离。 object.style.left = 以像素或点为单位的距离; 或 // 设置距离屏幕上边缘的距离。 object.style.top = 以像素或点为单位的距离;
手动动画
那么让我们使用 DOM 对象属性和 JavaScript function 来实现一个简单的动画，如下所示。以下列表包含不同的 DOM 方法。
我们使用 JavaScript function getElementById() 获取 DOM 对象，然后将其赋值给全局变量 imgObj。
我们定义了一个初始化 function init()，用于初始化 imgObj，其中我们设置了其 position 和 left 属性。
我们在窗口加载时调用初始化 function。
最后，我们调用 moveRight() function，将 left 距离增加 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>