当前位置: 首页 > 网络学院 > 客户端脚本教程 > JavaScript > JS Animation

JavaScript
JS数学对象参考
JS字符串对象参考
JS函数参考
JS事件参考
Javascript 常用正则表达式
FF和IE下的js兼容性问题
jQuery 简单介绍
jQuery / 核心 / $(expression, [context] ) 函数
jQuery / 核心 / $(html) 函数
如何使用JS来判断浏览器类型(ie、firefox,等等)
Javascript在IE和FireFox中的不同表现
3个js字符编码函数区别
javascript 中的 XMLDOM 对象

JavaScript 中的 JS Animation


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-03-01   浏览: 596 ::
收藏到网摘: 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

登陆 | 还没注册?