- JavaScript 基础教程
- JavaScript - 主页
- JavaScript - 概述
- JavaScript - 语法
- JavaScript - 启用
- JavaScript - 放置
- JavaScript - 变量
- JavaScript - 运算符
- JavaScript - 如果...否则
- Javascript - 切换大小写
- JavaScript - While 循环
- JavaScript - For 循环
- Javascript - 对于...in
- Javascript - 循环控制
- JavaScript - 函数
- Javascript - 事件
- JavaScript - Cookie
- JavaScript - 页面重定向
- JavaScript - 对话框
- Javascript - 无效关键字
- Javascript - 页面打印
- JavaScript 对象
- JavaScript - 对象
- JavaScript - 数字
- JavaScript - 布尔值
- JavaScript - 字符串
- JavaScript - 数组
- JavaScript - 日期
- JavaScript - 数学
- JavaScript - 正则表达式
- JavaScript - HTML DOM
- JavaScript 高级
- JavaScript - 错误处理
- Javascript - 验证
- JavaScript - 动画
- JavaScript - 多媒体
- JavaScript - 调试
- Javascript - 图像映射
- JavaScript - 浏览器
- JavaScript 有用资源
- JavaScript - 问题与解答
- JavaScript - 快速指南
- JavaScript - 函数
- JavaScript - 资源
JavaScript - 动画
您可以使用 JavaScript 创建复杂的动画,其中包含但不限于以下元素 -
- 烟花
- 淡入淡出效果
- 滚入或滚出
- 页入或页出
- 物体运动
您可能对现有的基于 JavaScript 的动画库感兴趣:Script.Aculo.us。
本教程提供了如何使用 JavaScript 创建动画的基本了解。
JavaScript 可用于根据由逻辑方程或函数确定的某种模式在页面中移动多个 DOM 元素(<img />、<div> 或任何其他 HTML 元素)。
JavaScript 提供了以下两个在动画程序中经常使用的函数。
setTimeout(function,duration) --此函数在duration毫秒后调用函数。
setInterval(function,uration) - 该函数在每个持续时间毫秒后调用函数。
clearTimeout(setTimeout_variable) - 此函数调用清除 setTimeout() 函数设置的任何计时器。
JavaScript 还可以设置 DOM 对象的许多属性,包括它在屏幕上的位置。您可以设置对象的顶部和左侧属性以将其放置在屏幕上的任何位置。这是它的语法。
// 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,并设置了它的位置和左侧属性。
我们在窗口加载时调用初始化函数。
最后,我们调用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>