JavaScript 动画效果
使用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>
|
效果演示
把鼠标放在下面这个蓝色徽章上试一下。
匿名:
还是别人的文章拿来改了一下,你就不能换一个例子呀…
3 August 2009, 2:56 amAqua:
有时间时会添加些更多的例子，目前还没有工夫整理。
3 August 2009, 12:45 pm小虫虫:
挺好的教程，对初学者快速入门很有用。非常感谢
16 May 2010, 1:13 pm尾巴:
太简单了，不过详细 有些东西的意思 比如function 为什么要用这个东西调用？这个东西在JS里面具体的意思 初学者 谁知道function 是什么意思 你这说来说去 在告诉你自己的例子的，而不是告诉别人如何了解意思，如何学好，如何创新！
1 June 2010, 10:01 amsegug:
这个例子是挺简单，不过初学者应该先看到是javascript手册。
14 September 2010, 3:43 amFollowForever:
楼主已经在前面的文章里介绍过function什么意思了，这是个系列文章的一部分。
12 February 2011, 8:07 amAgas:
document.b1.src 这个b1是什么呢？
26 June 2011, 9:57 pm