ネイティブ javascript_javascript スキルで実装されたシンプルなアニメーション効果-jsチュートリアル-php.cn

ネイティブ javascript_javascript スキルで実装されたシンプルなアニメーション効果

WBOY

リリース： 2016-05-16 15:07:21

オリジナル

1927 人が閲覧しました

この記事では、JavaScript で実装されたアニメーションを紹介します。開始ボタンをクリックすると、div が右に移動します。停止をクリックすると、div の移動が停止します。再度クリックすると、div は移動を続けます。以下のコードを参照してください。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<head>
<title>javascript实现的简单动画</title>
<style type="text/css">
#mydiv
{
 width:50px;
 height:50px;
 background-color:green;
 position:absolute;
}
</style>
<script type="text/javascript"> 
window.onload=function()
{
 var mydiv=document.getElementById("mydiv");
 var start=document.getElementById("start");
 var stopmove=document.getElementById("stopmove");
 var x=0;
 var flag;
 function move()
 {
  x=x+1;
  mydiv.style.left=x+"px";
 }
 start.onclick=function()
 {
  clearInterval(flag);
  flag=setInterval(move,20);
 }
 stopmove.onclick=function()
 {
  clearInterval(flag);
 }
 
}
</script>
<body>
<input type="button" id="start" value="开始运动" />
<input type="button" id="stopmove" value="停止运动" />
<div id="mydiv"></div>
</body>
</html>

ログイン後にコピー

コードの説明:

1.window.onload=function(){}、ドキュメントのコンテンツが完全にロードされたら、関数内のコードを実行します。
2.var mydiv=document.getElementById("mydiv")、id 属性値が mydiv である要素を取得します。
3.var start=document.getElementById("start")、id 属性 hi が start である要素を取得します。
4.var stopmove=document.getElementById("stopmove")、id 属性値が stopmove である要素を取得します。
5.mydiv.style.left=x+"px"、divのleft属性値を設定します。
6.start.onclick=function(){}で、start要素にonclickイベント処理関数を登録します。
7.clearInterval(flag)、タイマー機能を停止し、一方がスタートボタンを複数回クリックしてオーバーレイ効果を引き起こします。
8.flag=setInterval(move,20)、移動を開始します。

ネイティブ JavaScript で実装された上記の簡単なアニメーション効果は、エディターによって共有されたすべてのコンテンツです。参考にしていただければ幸いです。また、皆様にも Script Home をサポートしていただければ幸いです。