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