|
|
ボタンでアニメをコントロールする
| Sample |
|
| スクリプト |
| <SCRIPT LANGUAGE="JavaScript"> <!-- //画像のpathを設定(ここではカレント) hrefFLOGO0=''; //動かすスピード FLOGODly =100; //画像の番号 imgN = 5; //時計方向回転タイマー timer1=null; //反対方向回転タイマー timer2=null; //画像の事前読み込み FLOGONO = new Array(14) if(navigator.appVersion.charAt(0)>=3){ for(i = 0; i < 14; i++) { FLOGONO[i] = new Image(); FLOGONO[i].src = hrefFLOGO0 +"anime"+ i + ".gif"; }; }; //右転 function animate1(FLOGODly) { if(navigator.appVersion.charAt(0)>=3){ //書き換え document.animation1.src = FLOGONO[imgN].src; imgN++ ; if(imgN >= 14) { //リセット imgN = 0; }; //タイマークリア clearTimeout(timer1);clearTimeout(timer2); timer1=setTimeout('animate1(FLOGODly)',FLOGODly); }; }; //左転 function animate2() { if(navigator.appVersion.charAt(0)>=3){ //書き換え document.animation1.src = FLOGONO[imgN].src; imgN--; if(imgN <= 0) { //リセット imgN = 13; }; //タイマークリア clearTimeout(timer1);clearTimeout(timer2); timer2=setTimeout('animate2()',FLOGODly); }; }; --> </SCRIPT> <IMG SRC="anime1.gif" NAME="animation1" BORDER="0" WIDTH="181" HEIGHT="84"> <FORM> <INPUT TYPE="button" VALUE=" 反対回り " onClick="clearTimeout(timer1);clearTimeout(timer2);//タイマークリア; animate2(FLOGODly);//左転実行" > <INPUT TYPE="button" VALUE=" Stop " onClick="clearTimeout(timer1);clearTimeout(timer2);//タイマークリア" > <INPUT TYPE="button" VALUE=" 時計回り " onClick="clearTimeout(timer1);clearTimeout(timer2);//タイマークリア; animate1(FLOGODly);//右転実行" > <BR> <INPUT TYPE="button" VALUE=" 早く " onClick="FLOGODly=20; //20/1000秒にセット"> <INPUT TYPE="button" VALUE=" 普通 " onClick="FLOGODly=100; //0.1秒にセット" > <INPUT TYPE="button" VALUE=" 遅く " onClick="FLOGODly=400; //0.4秒にセット"> </FORM> |