|
|
|
03/16(Sun) 01:42
 ＵＦＯのように動く画像
【お知らせ】Netscape 6,7、Opera6でも動作するよう機能追加しました（2003/04/27）
ページをオープンすると、画像がＵＦＯのようにあちこち、せわしく動き回ります。やがて、時間が経つと止まってしまいます。画像の代わりに文章も使えます。
■設置方法
| 使用するCross-Browser function | moveLAYER |
| スタイルシート | imgpos |
■ヘッダー部(<HEAD>〜</HEAD>)に以下の関数を定義します。
- .imgpos { }内の left:-100px;top:-100px----ページオープン時に画像を隠すための設定です。画像が隠れない時はこの値を小さく(数字は大きく)して下さい。
- width:40----レイヤー幅です。画像が欠ける場合は値を大きくします。
- X、Y----スタートのX,Y座標。スタート位置を変更したい場合はこの値を変更します。
- limitLeft、limitRight、limitTop、limitBottom----画像はこの矩形の中を動き回ります。動く範囲を変更したい場合はこの値を変更します。
- speedX、speedY----移動スピード。値を大きくすると早くなります。
|
<![CDATA[
<STYLE TYPE="text/css">
<!--
/*--------------------------------------------------------------------
Dynamic HTML cross-browser for NC4.0 and IE4.0 (1999.02)
--------------------------------------------------------------------*/
.imgpos { position:absolute;left:-100;top:-100;width:40 }
-->
</STYLE>
<script language="javascript">
<!--
// Cross-Browser function -------------------------------------------
// レイヤ−移動
function moveLAYER(layName,x,y){
if(document.all)document.all(layName).style.pixelLeft=x //IE4,5,6,Opera6用
if(document.all)document.all(layName).style.pixelTop=y
if(document.layers)document.layers[layName].moveTo(x,y) //NN4用
if(document.getElementById)document.getElementById(layName).style.left=x //NN6,7用
if(document.getElementById)document.getElementById(layName).style.top=y
}
// Cross-Browser function (end)--------------------------------------
X = 200; //スタートX座標
Y = 100; //スタートY座標
limitLeft = 200; //バウンドする左端の座標
limitRight = 700; //バウンドする右端の座標
limitTop = 40; //バウンドする上端の座標
limitBottom = 180; //バウンドする下端の座標
speedX = 3; //X軸方向移動スピード
speedY = 2; //X軸方向移動スピード
dirX = 1; //X軸移動方向(1=正方向,-1=負方向)
dirY = 1; //Y軸移動方向(1=正方向,-1=負方向)
function flyingImage(){
dX = Math.random()* speedX * dirX; //X座標方向の移動量
dY = Math.random()* speedY * dirY; //Y座標方向の移動量
X += dX;
Y += dY;
moveLAYER('img01',X,Y)
if( X < limitLeft ) { dirX = 1 }; //方向反転
if( X > limitRight ) { dirX = -1 }; //方向反転
if( Y < limitTop ) { dirY = 1 }; //方向反転
if( Y > limitBottom ) { dirY = -1 }; //方向反転
}
// -->
</script>
]]>
|
■ボディ部(<BODY>〜</BODY>)に下の記述をします。
変更する箇所は以下のとおりです。あなたのページに合わせて変更して下さい。
- img src="../gif/baloon.gif"にあなたの表示したい画像を指定します。
- setTimeout("clearInterval(timerID)",30000)----30000ms(=30秒)後に画像が静止します。静止するまでの時間を増やしたり減らしたい時はこの値を変更します。
|
<![CDATA[
<DIV CLASS="imgpos" ID="img01"><img src="../gif/baloon.gif" border="0"></DIV>
<script language="javascript">
<!--
// flyingImage()の実行
timerID = setInterval("flyingImage()",10) //10ms毎に実行
setTimeout("clearInterval(timerID)",30000) //30秒後に終了
// -->
</script>
]]>
|
■応用：画像を文章にするには?
- <img src="../gif/baloon.gif" border="0">の代わりに文章を記述します。横に長くなる場合は適当に<br>を入れ改行して下さい。「width:40」の調整も忘れずに。
- スタイルシートimgposに「font-size:35px;color:red」などの文字用のスタイルを追加します。
|
|
