右転・左転ボタンで回る方向が変わり、早い・普通・遅いボタンでスピードが変わります。このロゴは筆者が日頃お世話になっている(^^)守谷の「ふれあいインターネット」のロゴです。現在はGIFアニメでくるくる回るものを使っていただいているのですが、同じアニメでもJavaScriptで作ると簡単にインタラクティブに仕上げることができます。NN3.0,IE4.0から使えます。
応用 : たとえば、画像を<a HREF=...>と</A>の間にはさんでonMouseOver(カーソルが触ったらなにかする)やonMouseOut(カーソルが離れたらなにかする)でイベントを起こしてやるとインタラクティブリンクボタンのでき上がりです。
参照 : new, Array(), オブジェクトの有無を調べる if(document.images){命令}, for(初期値;条件式;増分式){命令}, Image(), src, function, if(条件){命令1}else{命令2}, clearTimeout(), setTimeout(), onClick,
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
imgPath = '' // 画像のpathを設定(ここではカレント)
moveDly = 100 // 動かすスピード
imgNo = 5 // 画像番号
timerRight = null // 右転用タイマー
timerLeft = null // 左転用タイマー
//画像の事前読み込み
imgArray = new Array(9)
if(document.images){
for(i = 0; i < 9; i++) {
imgArray[i] = new Image()
imgArray[i].src = imgPath +"FLOGO"+ i + ".GIF"
}
}
//右転
function aniRight(){
if(document.images){
document.animation1.src = imgArray[imgNo].src //書き換え
imgNo++
if(imgNo >= 9){
imgNo = 0;//リセット
}
timerRight=setTimeout('aniRight()',moveDly);
}
}
//左転
function aniLeft() {
if(document.images){
document.animation1.src = imgArray[imgNo].src;//書き換え
imgNo--;
if(imgNo <= 0){
imgNo = 8;//リセット
}
timerLeft=setTimeout('aniLeft()',moveDly);
}
}
//停止 タイマークリア
function clearTimer(){
clearTimeout(timerRight) // 右転停止
clearTimeout(timerLeft) // 左転停止
}
//-->
</script>
</head>
</body>
<center>
<img src="FLOGO4.GIF" name="animation1"
border="0" width="100" height="100">
<form>
<input type="button" value=" 右転 "
onClick="clearTimer();aniRight()">
<input type="button" value=" 左転 "
onClick="clearTimer();aniLeft()">/
<input type="button" value=" Stop "
onClick="clearTimer()">
<br>
<input type="button" value=" 早い "
onClick="moveDly=1">
<input type="button" value=" 普通 "
onClick="moveDly=100">
<input type="button" value=" 遅い "
onClick="moveDly=1000">
</form>
</center>
</body>
</html>
if(document.images){命令1}else{命令2}はブラウザチェックです。ここではNN3.0以降のImage()などの命令を使っているのですが、これらをむき出しで使うとNN2.0やIE3.0などでエラーが出ます。そこで、エラー回避のためにdocument.imagesというオブジェクトが使えるかどうかを確認して使えるならImage関連の処理を{命令1}へそれ以外の場合の処理を{命令2}に記述します。ちなみに、ここでは、else{命令2}を省略してもかまいません。document.imagesが実装されたのはNN3.0以降なのでnavigator.appVersion.charAt(0)>=3と書いてバージョン3以上のブラウザに限定する方法もあります変数=new Array(9)でたとえばimgArray[番号]という配列を9個作ります。配列とは[番号]を付けてまとめて使うことのできる変数です。ここではimgArray[0].srcに最初の画像(FLOGO0.GIF)を、imgArray[1].srcに次の画像を、imgArray[2].srcに次の画像を....という風に画像ファイルを納めておいて、あとで、この番号の0から順に出力するという具合に使います
imgArray[i] = new Image()でimgArray[i]という配列で画像が扱えるようになります
for(i=0;i>9;i++){命令}は i が 0 から始めて 9(画像枚数)になるまで i に1を足し(++)ながら命令を実行するという意味です
document.animation1.src = takuimgArray[imgNo].srcは、animation1という名前の画像をimgArray[imgNoo].srcの画像に差し替えるという意味です
imgNo++はimgNo自身に1を足します。逆にimgNo--は1を引きます
if(imgNo >= 9){命令}は、もし変数imgNoが9と同じか9より大きければ、命令を実行するという意味
timeID=setTimeout("命令",時間)は時間(1000分の1秒単位)ごとに"命令"を実行します
clearTimeout(timeID)はtimeID=setTimeout("命令",時間)のタイマーをキャンセルし"命令"を中止します
onClick="命令文"でクリックしたら"命令文"を実行するという意味です
使用した画像 :
FLOGO0.GIF
FLOGO1.GIF
FLOGO2.GIF
FLOGO3.GIF
FLOGO5.GIF
FLOGO6.GIF
FLOGO7.GIF
FLOGO8.GIF
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)