文字や画像の移動
●<MARQUEE>を使う
エクスプローラーでのみ対応した機能ですが文字をスクロールさせる事が出来ます。
オプションの設定で移動の方向や幅、背景色などを変えることが出来ます。
詳しくは<MARQUEE>をご覧ください
●レイヤーを動かす
レイヤーはトレーシングペーパーやセル画のようなものと前回言いましたがそのうちの1枚をずらす事によって表示に動きをつけることが出来ます。その方法は、比較的簡単に行う事が出来ます。それではさっそく本題に入りましょう。
動かそうとする対象物を決めます。ここでは、前々回使用したbg1.gifを使用します。
<img src="bg1.gif" width=138 height=100>
動かそうとする対象物が決まればその部分のタグを<layer>〜</layer>タグで囲みます。
<layer><img src="bg1.gif" width=138 height=100></layer>
そのレイヤーを制御するための名前と元の位置を指定します
<layer name="bg1" top=100 left=800><img src="bg1.gif" width=138 height=100></layer>
これで動かされる側の設定は終わりです。次に、動かす側のスクリプトを<head>〜</head>内に書きます。
とりあえず、右から左方向へ動くように指定してみます。
<!--
function MoveLayer(){
if(document.layers["bg1"].left>0){
document.layers["bg1"].left-=1;
setTimeout("MoveLayer()",200);
}
}
//-->
最後に、このページを読んだ時にスクリプトが実行されるように設定します。
<body onload="MoveLayer()">
以上で、動きのあるページの完成です。
document.layers["レイヤー名"].leftは、レイヤーの左端の位置を示します。document.layers["レイヤー名"].topはれイヤーの上端の位置を示しますのでそれらの値をうまく組み合わせる事によって斜めに移動させたりする事が出来ます。
if(document.layers["bg1"].left>0){の意味は、「もしレイヤーの左端の位置が０ピクセル目より大きいならば」です。
document.layers["bg1"].left-=1;の意味は、「document.layers["bg1"].leftの値から１を引く」です。
setTimeout("MoveLayer()",200);の意味は、「200/1000秒経ったらMovLayer関数を実行せよ」です。
ね、簡単でしょ！
それでは、実際の表示例を見てみましょう
ファイル名：movel.html
<html>
<head>
<title>レイヤーを動かす</title>
<script language="JavaScript1.2">
<!--
function MovLayer(){
if(document.layers["bg1"].left>0){
document.layers["bg1"].left-=50;
setTimeout("MovLayer()",40);
}
}
//-->
</script>
</head>
<body onload="MovLayer()">
<layer name="bg1" top=100 left=800>
<img src="bg1.gif" width=138 height=100>
</layer>
</body>
</html>
●スタイルシートを動かす
Internet Explorerは、レイヤーという概念がありません。しかし、スタイルシートの位置を変化させる事によって同じような効果を得る事が出来ます．前回のレイヤーの基礎知識をマスターしていれば、簡単にInternet Explorer用に書きかえることが出来ます。それでは、実際に表示例を見てみましょう。
ファイル名：moves.html
<html>
<head>
<title>スタイルシートを動かす</title>
<script language="JavaScript1.2">
<!--
var sp = 800;
function MovCss(){
if(document.all["bg1"].style.left > "0px"){
sp = sp - 50;
document.all["bg1"].style.left = sp;
setTimeout("MovCss()",40);
}
}
//-->
</script>
</head>
<body onload="MovCss()">
<div ID="bg1" STYLE="position:absolute; width:138px; height:100px;
z-index:1; top:100px; left:800px; visibility:visible">
<img src="bg1.gif" name="imgbg1" width="138" height="100">
</div>
</body>
</html>