|
|
|
03/16(Sun) 01:35
 ぐるぐる回る画像
【お知らせ】Netscape 6,7、Opera6でも動作するよう機能追加しました（2003/04/27）
ページをオープンすると、画像がぐるぐる回りながら大きくなったり小さくなったりします。画像のかわりに文字も使えます。サンプルでは１０個の画像を使ってますが、すべて同じの１つの画像にしても結構です。
■設置方法
| 使用するCross-Browser function | setTOPLEFT |
| スタイルシート | imgpos |
■ヘッダー部に以下の関数を定義します。
- .imgpos { }内の left:-50px;top:-50px----ページオープン時に画像を隠すための設定です。画像が隠れない時はこの値を小さく(数字は大きく)して下さい。
- centerX、centerY----回転の中心X,Y座標。回転位置を変更したい場合はこの値を変更します。
- R----回転半径。回転の大きさを変更したい場合はこの値を変更します。
- moveNum----画像の個数。画像を増やしたり減らした時はこの値を変更します。この値はスクリプト中の layerName = "ABCDEFGHIJ".charAt(i); (レイヤーA〜Jの10個)と同じにします。
- サンプルの初期値のままで使えます。上記以外の初期値はあまりいじらないほうが・・・
|
<![CDATA[
<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()"を記述します
|
<![CDATA[
<BODY bgcolor=lightyellow text="navy" onLoad="rotateImage()">
]]>
|
■<BODY>部中に下のレイヤーを記述します。
変更する箇所は以下のとおりです。あなたのページに合わせて変更して下さい。
- ID="A"〜"J"----レイヤーの名前です。この名前はスクリプト中の layerName = "ABCDEFGHIJ".charAt(i); (レイヤーA〜Jの10個)と同じにします。
- <IMG SRC="・・">----使用する画像を指定します。サンプルでは１０個の異なる画像を使ってますが、すべて同じの１つの画像でも結構です。文字にしたい時は<IMG>タグの代わりに文字を記述します。
|
<![CDATA[
<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>
]]>
|
|
|
