📅  最后修改于: 2020-10-25 10:48:38             🧑  作者: Mango
您可以使用JavaScript创建具有但不限于以下元素的复杂动画-
在本章中,我们将看到如何使用JavaScript创建动画。
可以使用JavaScript根据逻辑方程式或函数确定的某种模式在页面上移动许多DOM元素(,
JavaScript提供以下在动画程序中经常使用的功能。
setTimeout (函数,duration)-此函数从现在开始的持续时间毫秒后调用该函数。
的setInterval(函数,持续时间) -此函数调用每几毫秒后的函数。
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,在那里我们设置了它的位置和left属性。
在窗口加载时,我们正在调用初始化函数。
我们正在调用moveRight()函数将左侧距离增加10个像素。您也可以将其设置为负值以将其移到左侧。
试试下面的例子
JavaScript Animation
在上面的示例中,我们看到了每次单击图像如何向右移动。我们可以使用JavaScript函数setTimeout()来自动执行此过程,如下所示。
在这里,我们添加了更多方法。所以,让我们看看这里有什么新东西。
moveRight()函数正在调用setTimeout()函数来设置imgObj的位置。
我们添加了一个新函数stop()来清除由setTimeout()函数设置的计时器,并将该对象设置在其初始位置。
请尝试以下示例代码。
JavaScript Animation
这是一个简单的示例,显示了带有鼠标事件的图像翻转。
让我们看看在下面的示例中我们正在使用什么-
在加载此页面时,“ if”语句检查图像对象的存在。如果图像对象不可用,则不会执行此块。
Image()构造函数创建并预加载一个名为image1的新图像对象。
src属性被分配了名为/images/html.gif的外部图像文件的名称。
同样,我们创建了image2对象,并在此对象中分配了/images/http.gif 。
# (井号)会禁用链接,以便浏览器在单击时不会尝试转到URL。该链接是图像。
当用户的鼠标移动到链路,而onmouseout事件处理程序被触发时该用户的从链路(图像)的距离的鼠标移动的onMouseOver触发事件处理程序。
当鼠标移到图像上时,HTTP图像从第一张图像更改为第二张图像。将鼠标移离图像时,将显示原始图像。
当鼠标移离链接时,初始图像html.gif将重新出现在屏幕上。