２．鶴が羽根をゆったり動かしながら飛翔するアニメーション
|
1 2 |
<!-- HTML 表記 --> <img src="image/turu/turu1.gif" id="turu" style="position:absolute; left: 260px; top: 10px; width:28%; height:auto;"/> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<SCRIPT type="text/JavaScript"> <!-- // １０個の鶴の画像を配列に読み込み animeImage=new Array(10) for (var i=0;i<10;i++){ animeImage[i]=new Image() animeImage[i].src="https://k-nagai.com/wp2/wp-content/themes/study/js/image/turu/turu"+(i+1)+".gif" } // 鶴の位置や移動距離(Pixcel）の初期値化 current=0; // １枚づつ変化させるカウンタの初期化 posTop=10; // 上部からの位置（初期値） posLeft=260; // 左からの位置（初期値） updownStep=3; // タイマー（動作時間間隔）で上下に移動するPixel数 leftStep=7; // タイマーで左に移動するPixel数 timer=setInterval("anime()",150) // 動作速度1,000分の150秒 // 鶴の位置決めとアニメの開始 function anime(){ document.getElementById("turu").style.top = posTop; // 上からの位置指定 document.getElementById("turu").style.left = posLeft; // 左からの位置指定 document.getElementById("turu").src=animeImage[current].src; // 画像の表示 current++; // currentに+1 次の画像に posLeft -= leftStep; // 左位置に-1 posTop += updownStep; // 上位置にupdownStepの値を+ if(current==10){current=0;} // １０枚入れ替わったので、初期値の0に if(posLeft<150) {updownStep=-2;} // 左位置が150未満で上位置に-2（2pxづつ上に行く） if(posLeft<-50) { // マイナス５０以上で値の初期化、マイナスは画像が枠から消えていく clearInterval(timer); // タイマーの初期化 posLeft=260; // 左位置の初期化 posTop=10; // 上位置の初期化 updownStep=2; // 上下に移動する数値の初期化 timer=setInterval("anime()",150); // 動作速度1,000分の150秒 } } //--> </SCRIPT> |