Javascript 简明教程
JavaScript - Animation
你可以使用 JavaScript 创建一个复杂的动画,包括但不限于以下元素:
-
Fireworks
-
Fade Effect
-
Roll-in or Roll-out
-
Page-in or Page-out
-
Object movements
你可能对现有的基于 JavaScript 的动画库感兴趣: Script.Aculo.us 。
本教程提供了如何使用 JavaScript 来创建动画的基本理解。
JavaScript 可用于移动一些 DOM 元素(<img/>、<div> 或任何其他 HTML 元素)在页面上依据由逻辑方程式或函数确定的某种样式进行移动。
JavaScript 提供了以下两个函数,在动画程序中经常使用。
-
setTimeout( function, duration) − 此函数在从现在起 duration 毫秒后调用 function 。
-
setInterval(function, duration) − 此函数每隔 duration 毫秒调用一次 function 。
-
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;
Manual Animation
因此,让我们实现一个使用 DOM 对象属性和 JavaScript 函数的简单动画,如下所示。以下列表包含不同的 DOM 方法。
-
我们正在使用 getElementById() JavaScript 函数获取 DOM 对象,然后将其分配给全局变量 imgObj 。
-
我们定义了一个初始化函数 init() 来初始化 imgObj ,我们在此设置了它的 position 和 left 属性。
-
我们正在窗口加载时调用初始化函数。
-
最后,我们正在调用 moveRight() 函数以将左距离增加 10 个像素。你还可以将其设置为负值以将其移动到左侧。
Example
尝试以下示例。
<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>
Automated Animation
在以上示例中,我们看到了图像如何随着每次点击向右移动。我们可以通过使用 JavaScript 函数 setTimeout() 自动化此过程,如下所示 −
这里我们添加了更多方法。所以,让我们看看这里有哪些新增内容 −
-
moveRight() 函数正在调用 setTimeout() 函数来设置 imgObj 的位置。
-
我们添加了一个新函数 stop() 来清除 setTimeout() 函数设置的计时器,并将其对象设置在其初始位置。
Example
尝试以下示例代码。
<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>
Rollover with a Mouse Event
这是一个显示鼠标事件图像翻转效果的简单示例。
让我们看看我们在以下示例中使用了什么 −
-
在加载此页面时,“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>