JavaScript 动画效果

Contents

使用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>

效果演示

把鼠标放在下面这个蓝色徽章上试一下。


Leave a Reply

Your email address will not be published.