文字や画像を動かす基本は、スタイルシートで、
position:absoluteまたは
position:relativeを指定して、ＪＡＶＡスクリプトで座標を計算して動かすことです。
（参照）
スタイルシートを設定するには、
<span></span>か、<
div></div>に、
style="position:absolute（またはrelative）"と記述します。
そして、
id="（適当な名前）"をつけておきます。
それから、それを表示する座標をＪＡＶＡスクリプトで繰り返し計算しながら、変化させていくのです。
それをソースで表すと、ＪＡＶＡスクリプトの方は、
<script language="JavaScript">
<!--
var k=0; //繰り返しの回数を数える。（座標の計算に使う）
var x,y; //ｘ座標、ｙ座標を入れる変数。
function ugoku() {
ｘ座標を計算する；
ｙ座標を計算する；
document.all. id.style.pixelLeft = x; //ｘ座標へ移動
document.all. id.style.pixelTop = y; //ｙ座標へ移動
k++; //ｋに１を足す（参照）
timerID=setTimeout("ugoku()",t);
//１０００分のｔ秒後に、ugoku()を繰り返す。
//止めるには、clearTimeout(timerID);
}
//-->
</script>
|
というふうに、ｘ、ｙを計算して、そこに移動する事を繰り返すと動いているように見えるのです。
繰り返しの回数を数えるのは（ｋ）、何回か繰り返すと止めるとか、ｘ、ｙの座標を計算するときに使うとかで利用するためです。
一方、スタイルシートを指定するタグの方は、
|
<span id="id" style="position:absolute;LEFT:0px;TOP:0px">
動かしたい文字や画像
</span>
|
または、
|
<span id="id" style="position:relative;LEFT:0px;TOP:0px">
動かしたい文字や画像
</span>
|
ｌｅｆｔ、ｔｏｐには、最初に表示したい座標を入れておきます。
というぐあいに、これが基本の構造です。
後はｘ、ｙをどのように計算するかで、その動きが決まります。
下にいろいろな計算式で、どのようになるか例をあげておきます。
その計算には、
演算子と
数学関数が参考になりますので参照してください。
左から右へ
ｙは変えずにｘを増やしていきます。
ｙ座標は変えず、ｘ座標のみ計算しています。
最初ｙは５０、ｘは−２０です。
x=x+5 で、繰り返しｘを５ずつ増やしていっています。
繰り返すたびに、ｋを１ずつ増やして、
ｋを５０で割った余りが４９になるたびに、ｘを最初の数値に戻しています。
if (k%50==49){
x=-20; //ｘを最初にあった座標にする。
}
このように、左から右へ５ずつ５０回進んだら、また左の最初にあったところから右へ移動します。
また、ｘ を変えずに ｙ を増やしていくと、上から下への動きになります。
右から左へ
ｙは変えずにｘを減らしていきます。
最初ｙは５０、ｘは２５０です。
今度もｙは変えません。
ｘを５ずつ減らしています。
x=x-5
そして、上のものと同じやり方で、最初に戻って繰り返します。
また、ｘ を変えずに、ｙ を減らしていくと、下から上への動きになります。
波
サインカーブをえがきます。
ｘとｙの計算は、
x=x+5;
ragi=k*Math.PI/180;
y=Math.sin(ragi)*50+50;
そしてこの例では、
k=k+10にして、ｋを１０ずつ増やしています。
if (x>=400){
clearTimeout(timerID);
}
return false;
ｘが４００を越えたら、止まります。
円
ｘ と ｙ の計算式は
ragi=k*Math.PI/180;
x=Math.cos(ragi)*70+100;
y=Math.sin(ragi)*70+100;
そして、k=k+10で、ｋを１０ずつ増やしています。
ふらふら
ｘ と ｙ の計算式は、
x=x+3;
y=y+Math.floor(Math.random()*7-3);
跳ねる
ｘ と ｙ の計算式は、
x=x+5;
y=Math.pow(k%40-20,2)/3+40;
k=k+4;
でこぼこ
ｘ と ｙ の計算式は、
x=x+4;
y=(x%80 >= 39) ? 50:80;
式の内容については、
演算子と
数学関数が参考になりますので参照してください。