繁體中文当前位置: 首页 > 网络学院 > 客户端脚本教程 > JavaScript > JS Animation
JavaScript 中的 JS Animation
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-03-01 浏览: 629 ::
收藏到网摘: n/a
With JavaScript we can create animated images.
使用JS我们可以建立动态的图片
Examples举例
Button animation[按钮动画]
JavaScript Animation
JavaScript 动画
It is possible to use JavaScript to create animated images.
使用JS来建立动态的图片是可行的
The trick is to let a JavaScript change between different images on different events.
这个把戏是让JS在不同的事件时改变为两张不一样的图片（鼠标移上去的时候一张，移出来的时候又是另外一张）
In the following example we will add an image that should act as a link button on a web page. We will then add an onMouseOver event and an onMouseOut event that will run two JavaScript functions that will change between the images.
在接下来的例子中我们将添加一张图片来扮演页面上按钮的角色。再添加onMouseOver事件和onMouseOut事件来运行两个JS函数从而在两张图片之间来回切换。
The HTML Code
HTML代码
The HTML code looks like this:
像这样的HTML代码：
<a href="http://www.w3schools.com" target="_blank" onmouseOver="mouseOver()" onmouseOut="mouseOut()"> <img border="0" alt="Visit W3Schools!" src="b_pink.gif" name="b1" /> </a> |
Note that we have given the image a name to make it possible for JavaScript to address it later.
可以注意到我们给图片加了一个name来使它能够在后面被JS所对应起来
The onMouseOver event tells the browser that once a mouse is rolled over the image, the browser should execute a function that will replace the image with another image.
onMouseOver事件会让浏览器当鼠标在移动到图片按钮上时执行替换图片的函数。
The onMouseOut event tells the browser that once a mouse is rolled away from the image, another JavaScript function should be executed. This function will insert the original image again.
onMouseOut事件则是当鼠标移出图片按钮时恢复原先的图片
IMPORTANT! The mouse events are added to the <a> tag, and not to the <img> tag. Unfortunately, browsers do not support mouse events on images!
重要信息！鼠标事件是添加在<a>标签里而不是<img>标签。
The JavaScript Code
JS 代码
The changing between the images is done with the following JavaScript:
改变图片的JS代码如下：
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="b_blue.gif"
}
function mouseOut()
{
document.b1.src ="b_pink.gif"
}
</script> |
The function mouseOver() causes the image to shift to "b_blue.gif".
mouseOver()函数引导图片转成"b_blue.gif"
The function mouseOut() causes the image to shift to "b_pink.gif".
mouseOut()函数引导图片转成"b_pink.gif"
The Entire Code
完整的代码
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="b_blue.gif"
}
function mouseOut()
{
document.b1.src ="b_pink.gif"
}
</script>
</head>
<body>
<a href="http://www.w3schools.com" target="_blank"
onmouseOver="mouseOver()"
onmouseOut="mouseOut()">
<img border="0" alt="Visit W3Schools!"
src="b_pink.gif" name="b1" />
</a>
</body>
</html> |
评论 (0) All
