本日  昨日
 
03/16(Sun) 02:59

o ぐるぐる回る画像
【お知らせ】Netscape 6,7、Opera6でも動作するよう機能追加しました(2003/04/27)

ページをオープンすると、画像がぐるぐる回りながら大きくなったり小さくなったりします。画像のかわりに文字も使えます。サンプルでは10個の画像を使ってますが、すべて同じの1つの画像にしても結構です。






設置方法
使用するCross-Browser functionsetTOPLEFT
スタイルシートimgpos

ヘッダー部に以下の関数を定義します。

  1. .imgpos { }内の left:-50px;top:-50px----ページオープン時に画像を隠すための設定です。画像が隠れない時はこの値を小さく(数字は大きく)して下さい。
  2. centerX、centerY----回転の中心X,Y座標。回転位置を変更したい場合はこの値を変更します。
  3. R----回転半径。回転の大きさを変更したい場合はこの値を変更します。
  4. moveNum----画像の個数。画像を増やしたり減らした時はこの値を変更します。この値はスクリプト中の layerName = "ABCDEFGHIJ".charAt(i); (レイヤーA〜Jの10個)と同じにします。
  5. サンプルの初期値のままで使えます。上記以外の初期値はあまりいじらないほうが・・・
<STYLE TYPE="text/css"> <!-- /*-------------------------------------------------------------------- Dynamic HTML cross-browser for NC4.0 and IE4.0 (1999.01) --------------------------------------------------------------------*/ .imgpos { position:absolute;left:-50px;top:-50px;width:30 } --> </STYLE> <SCRIPT Language="JavaScript"> <!-- // Cross-Browser function ------------------------------------------- // レイヤー左辺X座標、上辺Y座標セット function setTOPLEFT(layName,x,y){ if(document.all){ //IE4,5,6,Opera6用 document.all(layName).style.pixelLeft = x; document.all(layName).style.pixelTop = y; } if(document.layers){ //NN4用 document.layers[layName].left = x; document.layers[layName].top = y; } if(document.getElementById){ //NN6,7用 document.getElementById(layName).style.left = x; document.getElementById(layName).style.top = y; } } // Cross-Browser function (end)-------------------------------------- // 回転 centerX = 185; // 回転の中心X座標 centerY = 160; // 回転の中心Y座標 R = 105; // 半径 Rini = R; // 半径初期値 offset = -10; // 収束速度 moveNum = 10; // 一度に移動するレイヤーの数 timerID = 0; // タイマー変数 pi = Math.PI / 180; // 角度からラジアン変換用 step = 0; // 回転角度 function rotateImage(){ for (i=0; i<moveNum; i++){ layerName = "ABCDEFGHIJ".charAt(i);// レイヤー名の取得 sita = (i * 360 / moveNum)+step; COS = Math.cos(sita * pi); SIN = Math.sin(sita * pi); X = (COS + SIN)*R +centerX; Y = (SIN - COS)*R +centerY; setTOPLEFT(layerName,X,Y); } R = R + offset; if ((R < -Rini) || (R > Rini)) offset = -offset; step = step + 10; clearTimeout(timerID); timerID = setTimeout("rotateImage()",100); // タイマー割り込み設定 } // --> </SCRIPT>


ボディ部に以下の記述をします。

<BODY>タグの中にonLoad="rotateImage()"を記述します
<BODY bgcolor=lightyellow text="navy" onLoad="rotateImage()">

<BODY>部中に下のレイヤーを記述します。 変更する箇所は以下のとおりです。あなたのページに合わせて変更して下さい。

  1. ID="A"〜"J"----レイヤーの名前です。この名前はスクリプト中の layerName = "ABCDEFGHIJ".charAt(i); (レイヤーA〜Jの10個)と同じにします。
  2. <IMG SRC="・・">----使用する画像を指定します。サンプルでは10個の異なる画像を使ってますが、すべて同じの1つの画像でも結構です。文字にしたい時は<IMG>タグの代わりに文字を記述します。
<DIV CLASS="imgpos" ID="A"><IMG SRC="../gif/present.gif"></DIV> <DIV CLASS="imgpos" ID="B"><IMG SRC="../gif/m2.gif"></DIV> <DIV CLASS="imgpos" ID="C"><IMG SRC="../gif/m3.gif"></DIV> <DIV CLASS="imgpos" ID="D"><IMG SRC="../gif/m4.gif"></DIV> <DIV CLASS="imgpos" ID="E"><IMG SRC="../gif/baloon.gif"></DIV> <DIV CLASS="imgpos" ID="F"><IMG SRC="../gif/w1.gif"></DIV> <DIV CLASS="imgpos" ID="G"><IMG SRC="../gif/w2.gif"></DIV> <DIV CLASS="imgpos" ID="H"><IMG SRC="../gif/w3.gif"></DIV> <DIV CLASS="imgpos" ID="I"><IMG SRC="../gif/heart.gif"></DIV> <DIV CLASS="imgpos" ID="J"><IMG SRC="../gif/tree.gif"></DIV>

 
 
©1997- Kikuchisan's workshop All rights reserved //

スポンサーリンク

関連コンテンツ