Java ScriptでアニメーションGIF風の動きをつける

Java Scriptの勉強、画像の処理です。

1秒ごとに画像を切り替えていきます。結果的にアニメーションGIFと同じ感じの効果がでました。

XHTML

<body onload="setInterval('anime()',1000)">

<p style="text-align:center;">

<img src="img/nemuru01.gif" width="520" height="370" alt="sleep" name="sleeping" /></p>

<p style="text-align:center;"><form>

<input type="button" value="閉じる" onclick="tojiru()" />
</form></p>

</body>

Java Script File

// JavaScript Document

number=1;

function anime(){

if(number==1){

document.sleeping.src="img/nemuru02.gif";

number=2;

}

else if(number==2){

document.sleeping.src="img/nemuru01.gif";

number=3;

}

else if(number==3){

document.sleeping.src="img/nemuru01.gif";

number=4;

}

else if(number==4){

document.sleeping.src="img/nemuru02.gif";

number=5;

}

else if(number==5){

document.sleeping.src="img/nemuru01.gif";

number=6;

}

else if(number==6){

document.sleeping.src="img/nemuru01.gif";

number=7;

}

else if(number==7){

document.sleeping.src="img/nemuru01.gif";

number=8;

}

else if(number==8){

document.sleeping.src="img/nemuru01.gif";

number=9;

}

else if(number==9){

document.sleeping.src="img/nemuru02.gif";

number=10;

}

else if(number==10){

document.sleeping.src="img/nemuru01.gif";

number=11;

}

else if(number==11){

document.sleeping.src="img/nemuru01.gif";

number=12;

}

else if(number==12){

document.sleeping.src="img/nemuru02.gif";

number=13;

}

else if(number==13){

document.sleeping.src="img/nemuru01.gif";

number=14;

}

else if(number==14){

document.sleeping.src="img/nemuru01.gif";

number=15;

}

else if(number==15){

document.sleeping.src="img/nemuru02.gif";

number=16;

}

else if(number==16){

document.sleeping.src="img/nemuru01.gif";

number=17;

}

else if(number==17){

document.sleeping.src="img/nemuru01.gif";

number=18;

}

else if(number==18){

document.sleeping.src="img/nemuru03.gif";

number=19;

}

else if(number==19){

document.sleeping.src="img/nemuru03.gif";

number=20;

}

else if(number==20){

document.sleeping.src="img/nemuru04.gif";

number=21;

}



else{

document.sleeping.src="img/nemuru04.gif";

number=1;

}

}

function tojiru(){

window.close();

}

▼サンプルはこちら

ふつうにアニメーションGIFでできることをなぜ？という疑問には、気づかないフリをしている見習ですぅ。

それに、なんか不必要に長いコードです。きっと、もっとカンタンに済ます方法があるんだろうなぁ。早くできるようになるといいなと期待を持っている見習でした。

2011年12月19日12:40 AM| カテゴリー： Java ScriptとJ Query,見習い奮闘記| コメント (0)