当前位置: 首页 > 网络学院 > 客户端脚本教程 > JavaScript > JS Animation
With JavaScript we can create animated images.
使用JS我们可以建立动态的图片
Button animation[按钮动画]
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 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 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"
<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> |