- HTML中文网
- 联系QQ:18840023
- QQ交流群
- 微信公众号
您可以使用javascript创建具有但不限于以下元素的复杂动画:
● 烟花
● 淡化效果
● 滚入或滚出
● Page-in或Page-out
● 物体运动
在本章中,我们将了解如何使用JavaScript创建动画。
JavaScript可用于根据逻辑方程或函数确定的某种模式在页面周围移动大量的DOM元素(<img/>、<div>或任何其他HTML元素)。
JavaScript提供了以下在动画程序中经常使用的函数。
● setTimeout(function,duration) - 此函数从现在起持续数毫秒后调用该函数。
● setInterval(function,duration) - 此函数在每个持续时间毫秒后调用该函数。
● clearTimeout(setTimeout_variable) - 该函数清除setTimeout()函数设置的任何计时器。
JavaScript还可以设置DOM对象的许多属性,包括它在屏幕上的位置。您可以设置对象的顶部和左侧属性,以将其放置在屏幕上的任何位置。以下是语法:
// 设置距屏幕左边缘的距离。 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,我们已经设置了它的位置和左边的属性。
● 我们在窗口加载时调用初始化函数。
● 我们调用moveRight()函数将左边距离增加10个像素。您也可以将其设置为负值,将其移动到左侧。
例
请尝试以下示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <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>单击下面的按钮将图像向右移动</p> <input type = "button" value = "点击我" onclick = "moveRight();" /> </form> </body> </html>
成功执行上述代码后,将显示以下输出:
自动动画
在上面的示例中,我们看到了每次单击时图像如何向右移动。我们可以使用JavaScript函数setTimeout()自动执行此过程,如下所示。
这里我们添加了更多方法。所以,让我们看看这里有什么新东西。
● MoveRight的()函数是调用的setTimeout()函数来设置imgObj的位置。
● 我们添加了一个新函数stop()来清除setTimeout()函数设置的定时器,并将对象设置在其初始位置。
例
请尝试以下示例代码。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <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>单击下面的按钮以处理动画</p> <input type="button" value="开始" onclick = "moveRight();" /> <input type = "button" value="停止" onclick = "stop();" /> </form> </body> </html>
成功执行上述代码后,将显示以下输出:
鼠标移动事件
这是一个简单的示例,显示了鼠标事件的图像翻转。
让我们看看我们在以下示例中使用的内容 -
● 在加载此页面时,“if”语句检查图像对象是否存在。如果图像对象不可用,则不会执行此块。
● Image()构造函数创建并预加载一个名为image1的新图像对象。
● src属性指定名为/images/html.gif的外部图像文件的名称。
● 类似地,我们创建了image2对象并在该对象中分配/images/http.gif。
● 使用#(散列标记)禁用链接,以便浏览器在单击时不尝试转到URL。这个链接是一个图像。
● 当用户的鼠标移动到链接时触发onMouseOver事件处理程序,当用户的鼠标离开链接(图像)时触发onMouseOut事件处理程序。
● 当鼠标移动到图像上时,图像将从第一个图像更改为第二个图像。当鼠标从图像移开时,将显示原始图像。
● 当鼠标离开链接时,初始图像html.gif将重新出现在屏幕上。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Rollover with a Mouse Events</title> <script type = "text/javascript"> <!-- if(document.images) { var image1 = new Image(); image1.src = "html.gif"; var image2 = new Image(); image2.src = "http.gif"; } // --> </script> </head> <body> <p>将鼠标移到图像上查看结果</p> <a href = "#" onMouseOver = "document.myImage.src = image2.src;" onMouseOut = "document.myImage.src = image1.src;"> <img name = "myImage" src = "html.gif" /> </a> </body> </html>
成功执行上述代码后,将显示以下输出:
推荐手册