前回ではIMGタグによってソースに直接円運動させるエレメントを記述していました。そのため配置する数分だけimgタグを書き、idを予め付けておかなければなりません。
今回は円運動させるエレメントを設定した数に合わせてスクリプトで書き出します。またそのエレメントに適用させる画像は特定の包括エレメントに存在するIMGエレメントから得ることにします。
①包括エレメントにIMGタグでエレメントを記述する。
<div id="imgset" style="display:none">
<img
src="octopus.gif">
<img src="b_penguin_blue_1.gif">
<img
src="a_whale_blue.gif">
</div>
包括エレメントimgsetにIMGエレメントを入れておきます。包括エレメントimgsetにはスタイルシートでdisplay:noneと記述することで、このエレメントは非表示になります。ここでは見通の画像を用意しました。
さてこのIMGエレメントにはidがつけてありません。しかし、既に講座で説明したように、エレメントの子エレメントにアクセスする方法があります。
親であるimgsetエレメントの内包エレメント（子エレメント）は、親エレメントのコレクションとしてオブジェクトとしてアクセスできます。
子エレメントはobject.allコレクションの要素、またはobject.childrenコレクションの要素になるからです。
<img src="octpus.gif">エレメントはimgset.all(0)またはimgset.children(0)になります。
<img
src="b_penguin_blue_1.gif">エレメントはimgset.all(1)またはimgset.children(1)になります。
<img
src="a_whale_blue.gif">エレメントはimgset.all(2)またはimgset.children(2)になります。
②配置する数を設定し、その数だけIMGエレメントを書き出す。
書き出すにはdocumentオブジェクトのwrite()メソッドを使用すればいいのです。書き出したIMGエレメントはアクセスが簡単になるようにするためにidを番号付きで付加するとよさそうですね。n番目のIMGエレメントのidは"rimg"+nのようにします。
document.write("<img id='rimg"+n+"'・・・")ここまではできそうです。
書き出すエレメントの位置設定は前回のようにposition:absolute; ; left:-1000px; top:0pxでとりあえず左外に追い出しておきましょう。
問題はsrcです。これはimgsetの子エレメントにあたるIMGエレメントから順番に導きたいと思います。
1番目はimgset.children(0)のsrcを当てはめ、二番目はimgset.children(1)を、三番目はimgset.children(2)を、四番目は戻りimgset.children(0)を・・・というようにしたいわけです。
ではn番目はどうなるかを考えましょう。
番号部分は0=>1=>2=>0=>1=>2・・・のようになりますね。このとりうる値に見覚えはありませんか？そう剰余です。nが正の整数ならn%3は必ず0か1か2になりますね。
nが1の時0に、nが2の時1に、nが3の時2に、nが4の時0に・・・n番目は？
(n-1)%3ですね。
そしてこの3ですが、そもそもなぜ3なのかを考えますと、imgsetの子エレメントの数が3だからですね。子エレメントが4つあれば、0=>1=>2=>3=>0・・・のように当てはめることになります。
ということはimgsetの子エレメントがm個ある場合は(n-1)mとなります。
mは実際にはimgsetの子エレメントの数です。これはallコレクションの要素数（あるいはchildrenコレクションの要素数）です。コレクションの要素数はこれまた既に出てきましたが、コレクションのlengthプロパティで得ることができます。
そこで書き直すと(n-1)%imgset.all.lengthとなります。
書き出すIMGエレメントに適用するsrcはimgset.all((n-1)%imgset.all.length).srcとなります。ちょっと訳がわからなくなりそうですが、整理してくださいね。
document.write("<img id='rimg"+n+"' src='"+imgset.all((n-1)%imgset.all.length).src+"' style='position:absolute; left:-1000px; top:0px'>")
document.write("文字列")なので、変数や計算部分は""で括らずに記述しなければなりませんよ。計算や式で導いた値を連結します。
"<img id='rimg"+n+"' src='"の部分だけを見ると、<img id='rimg番号' src='という文字列になることはわかりますね。それに更に+imgset.all((n-1)%imgset.all.length).src+でこの部分の実際の内容が連結されますよ。
nですが実際にはvar es=3//エレメントの数を入れるによって1からesまで変化します。
for(n=1;n<=es;n++){
document.write("<img
id='rimg"+n+"' src='"+imgset.all((n-1)%imgset.all.length).src+"'
style='position:absolute; left:-1000px; top:0px'>")
}
動かすための関数ですが、今回は書き出したエレメントに付けたIDがrimg番号ですね。従って少し書き換えが必要になります。
function en(n){
eval("rimg"+n).style.pixelLeft=Math.cos(deg[n]*Math.PI/180)*hn+cx-eval("rimg"+n).clientWidth/2
eval("rimg"+n).style.pixelTop=Math.sin(deg[n]*Math.PI/180)*hn+cy-eval("rimg"+n).clientHeight/2
deg[n]=deg[n]+dd//deg[n]+=ddでもOK
setTimeout("en("+n+")",10)
}
[ソース]
<HTML>
<head>
<meta http-equiv="content-type"
content="text/html; charset=shift_jis">
<META http-equiv="Content-Style-Type"
content="text/css">
<title></title>
</head>
<body
onload="setTimeout('enstart()',3000)" style="overflow:auto;
margin:0px; padding:0px">
<div id="imgset"
style="display:none">
<img src="octopus.gif">
<img src="b_penguin_blue_1.gif">
<img
src="a_whale_blue.gif">
</div>
<script>
var
es=5//エレメントの数を入れる
var deg=new Array()//配列オブジェクト。それぞれの角度計算用です。
for(n=1;n<=es;n++){
deg[n]=360/es*(n-1)
document.write("<img
id='rimg"+n+"' src='"+imgset.all((n-1)%imgset.all.length).src+"'
style='position:absolute; left:-1000px; top:0px'>")
}
var
dd=5//角度変化量（プラスで右回り、マイナスで左回り）
var cx=300//中心X座標
var
cy=200//中心Y座標
var hn=150//半径
function en(n){
eval("rimg"+n).style.pixelLeft=Math.cos(deg[n]*Math.PI/180)*hn+cx-eval("rimg"+n).clientWidth/2
eval("rimg"+n).style.pixelTop=Math.sin(deg[n]*Math.PI/180)*hn+cy-eval("rimg"+n).clientHeight/2
deg[n]=deg[n]+dd//deg[n]+=ddでもOK
setTimeout("en("+n+")",10)
}
function
enstart(){
for(n=1;n<=es;n++){
en(n)
}
}
</script>
</body>
</html>
これをマウス追従させてみましょう。
中心座標(cx,cy)をマウスのポインタ位置にするには次のようになりますね。
function movecxy(){
cx=event.x
cy=event.y
}
document.body.onmousemove=movecxy
このひな形を元にいろいろ改造をお楽しみください。例えば角度に応じて半径を変えるなど面白いと思います。
一例として角度変化に応じて半径を変更し、div1エレメントにdocument.write()でIMGエレメントを書き出して、div1の中でマウス追従してみました
次回からひな形でよく使われる雪降りに挑戦です。雪降りでの横揺れは今回行った三角関数を使用することが多いです。
次のサンプルで雪降りの横揺れの手法の一つを確認しておいて下さい。
