【Javascript】javascript三十三JavaScriptアニメーションの学習

1988 ワード

JavaScript

JavaScriptを使用して、ダイナミックな画像を作成できます.
実例
ボタンアニメーション
2つの異なるイベントを使用して2つの対応する関数を駆動し、2つの対応するピクチャを切り替えてアニメーション効果を生成します.
JavaScriptアニメーション
JavaScriptを使用して動画を作成することは可能です.
コツは、JavaScriptを使って異なるイベントで異なる画像を切り替えることです.
次の例では、リンクボタンとしての画像を作成します.onMouseOverイベントとonMouseOutイベントを使用して、JavaScript関数を駆動して画像を切り替えます.
HTMLコード
これはHTMLコードです.

<a href="http://www.w3school.com.cn" target="_blank">

<img border="0" alt="Visit W3School!"

src="/i/eg_mouse2.jpg" name="b1"

onmouseOver="mouseOver()"

onmouseOut="mouseOut()" />

</a>

注意:画像にnameプロパティを追加しました.これによりJavaScriptが見つかります.
onMouseOverイベントの役割は、マウスが画像の上に浮かぶと、ブラウザが関数を実行し、この関数はこの画像を別の画像に置き換えることをブラウザに伝えることです.
onMouseOutイベントの役割は、マウスが画像から離れると、ブラウザが別の関数を実行し、元の画像を再挿入することをブラウザに伝えることです.
JavaScriptコード
次のコードで画像を切り替えます.

<script type="text/javascript">

function mouseOver()

{

document.b1.src ="/i/eg_mouse.jpg"

}

function mouseOut()

{

document.b1.src ="/i/eg_mouse2.jpg"

}

</script>

関数mouseOver()は、画像を「eg_mouse.jpg」に切り替えます.
関数mouseOut()は、画像を「eg_mouse 2.jpg」に切り替えます.
完全なコード:

<html>

<head>

<script type="text/javascript">

function mouseOver()

  {

  document.b1.src ="/i/eg_mouse.jpg"

  }

function mouseOut()

  {

  document.b1.src ="/i/eg_mouse2.jpg"

  }

</script>

</head>



<body>

<a href="http://www.w3school.com.cn" target="_blank">

<img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1"

onmouseOver="mouseOver()"

onmouseOut="mouseOut()" />

</a>

</body>

</html>

gradle学習ノート(四)Groovy高級用法

牛刀小試験(2)--Goolge gearsを用いてオフライン応用を作成した.