使用JavaScript可以生成图像的动画效果。
———————————————————————
JavaScript 动画
使用JavaScript可以生成图像的动画效果，技巧是使用JavaScript在不同的事件上转换显示不同的图片。
下面的例子我们在页面上增加一个图像，用来当作一个链接按钮。然后我们在这个按钮上增加一个onMouseOver事件和一个onMouseOut事件，这两个事件将调用不同的函数来显示不同的图片，从而造成动画效果。onMouseOver事件在鼠标移到按钮上面时触发。onMouseOut事件在鼠标从按钮上移开时触发。
HTML代码
页面的HTML代码如下：
<a href="http://www.prglab.com/blog" target="_blank"> <img border="0" alt="访问程序员实验室!" src="mouse_out.jpg" name="b1" onmouseOver="mouseOver()" onmouseOut="mouseOut()" /> </a> |
注意我们给了这个图像一个名称(name)，以便后面JavaScript来识别它。
onMouseOver事件告诉浏览器当鼠标滑到图像时，浏览器应该执行函数mouseOver()。mouseOver()函数会将此图片替换为另一张图片。
onMouseOut 事件告诉浏览器当鼠标从图片上移开时，另一个JavaScript函数mouseOut()应该被执行，这个函数会把原来的图片恢复过来。
JavaScript代码
下面是函数mouseOver()和mouseOut()的JavaScript代码：
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="mouse_over.jpg"
}
function mouseOut()
{
document.b1.src ="mouse_out.jpg"
}
</script>
|
函数mouseOver() 将图片换为 “mouse_over.jpg”.
函数 mouseOut() 将图片换为 “mouse_out.jpg”.
完整的代码
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="mouse_over.jpg"
}
function mouseOut()
{
document.b1.src ="mouse_out.jpg"
}
</script>
</head>
<body>
<a href="http://www.prglab.com/blog" target="_blank">
<img border="0" alt="访问程序员实验室!"
src="mouse_out.jpg" name="b1"
onmouseOver="mouseOver()"
onmouseOut="mouseOut()" />
</a>
</body>
</html>
|
效果演示
把鼠标放在下面这个蓝色徽章上试一下。
