JavaScript 动画

我们可以使用 JavaScript 来创建动态的图像。

实例

按钮动画
利用两个不同的事件来驱动两个相应的函数，来切换两张对应的图片以创造出动画效果。

JavaScript 动画

使用 JavaScript 创建动态图像是可行的。

窍门是：使用 JavaScript 通过不同的事件来切换不同的图像。

在下面的例子中，我们要制作一个充当链接按钮的图像。我们将使用 onMouseOver 事件和 onMouseOut 事件来驱动 JavaScript 函数切换图像。

HTML 代码

这是 HTML 代码：

<a href="http://www.W3Cschool.cn" target="_blank">

<img border="0" alt="Visit W3Cschool!"

src="/i/eg_mouse2.jpg" name="b1"

onmouseOver="mouseOver()"

onmouseOut="mouseOut()" />

</a>

注意：我们已为图像添加了 name 属性，这样 JavaScript 就能找到它了。

onMouseOver 事件的作用是告知浏览器：一旦鼠标悬浮于图像之上，浏览器就会执行某个函数，这个函数会把这副图像替换为另一幅。

onMouseOut 事件的作用是告知浏览器：一旦鼠标离开图像，浏览器就要执行另一个函数，这个函数会重新插入原来的那幅图像。

JavaScript 代码

通过下面的代码来切换图像：

<script type="text/javascript">

function mouseOver()

{

document.b1.src ="/i/eg_mouse.jpg"

}

function mouseOut()

{

document.b1.src ="/i/eg_mouse2.jpg"

}

</script>

函数 mouseOver() 将图像切换为 "eg_mouse.jpg"。

函数 mouseOut() 将图像切换为 "eg_mouse2.jpg"。

完整的代码：

<html>

<head>

<script type="text/javascript">

function mouseOver()

  {

  document.b1.src ="/i/eg_mouse.jpg"

  }

function mouseOut()

  {

  document.b1.src ="/i/eg_mouse2.jpg"

  }

</script>

</head>



<body>

<a href="http://www.W3Cschool.cn" target="_blank">

<img border="0" alt="Visit W3Cschool!" src="/i/eg_mouse2.jpg" name="b1"

onmouseOver="mouseOver()"

onmouseOut="mouseOut()" />

</a>

</body>

</html>