|
|
|
♪
を
ち
待
お
く
ら
ば
し
今
03/16(Sun) 03:03
 ぐるぐる回る文字
【お知らせ】応用スクリプト「リング型リンクセレクター」（2003/09/04）
この「ぐるぐる回る文字」を応用した「リング型リンクセレクタ」がXANIONGROUPSさんのページで紹介されてます。操作パネルを操作すると回りだし、ターゲットのところに来た画像の所で選択ボタンをクリックするとそのターゲットされた画像のアドレスにジャンプする、リンクの説明も設定できる、画像をクリックしてもジャンプできる、かなりユニークなリング型セレクタです。
【お知らせ】Netscape 6,7、Opera6でも動作するよう機能追加しました（2003/04/27）
ページをオープンすると、文字がぐるぐる回ります。文字のかわりに画像も使えます。
■設置方法
| 使用するCross-Browser function | setTOPLEFT |
| スタイルシート | charpos |
■ヘッダー部に以下の関数を定義します。
- .charpos { }内の left:-50px;top:-50px----ページオープン時に文字を隠すための設定です。文字が隠れない時はこの値を小さく(数字は大きく)して下さい。
- font-size:35px"----文字の大きさです。
- width:40----レイヤー幅です。文字が欠ける場合は値を大きくします。
- 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)
--------------------------------------------------------------------*/
.charpos { position:absolute;left:-50px;top:-50px;font-size:35px;width:40 }
-->
</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 = 200; // 回転の中心X座標
centerY = 150; // 回転の中心Y座標
R = 70; // 半径
moveNum = 10; // 一度に移動するレイヤーの数
timerID = 0; // タイマー変数
pi = Math.PI / 180; // 角度からラジアン変換用
step = 0; // 回転角度
function rotateTitle() {
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);
}
step = step + 5;
clearTimeout(timerID);
timerID = setTimeout("rotateTitle()",100);// タイマー割り込み設定
}
// -->
</SCRIPT>
]]>
|
■ボディ部に以下の記述をします。
■<BODY>タグの中にonLoad="rotateTitle()"を記述します
|
<![CDATA[
<BODY bgcolor=lightyellow text="navy" onLoad="rotateTitle()">
]]>
|
■<BODY>部中に下のレイヤーを記述します。
変更する箇所は以下のとおりです。あなたのページに合わせて変更して下さい。
- ID="A"〜"J"----レイヤーの名前です。この名前はスクリプト中の layerName = "ABCDEFGHIJ".charAt(i); (レイヤーA〜Jの10個)と同じにします。
- 今しばらくお待ちを♪----文字を指定します。サンプルでは１０個の文字を使ってますが、レイヤー数を変更すれば何文字でも使えます。画像にしたい時は<IMG>タグを使います。
|
<![CDATA[
<DIV CLASS="charpos" ID="A"><font color=#0066FF>♪</font></DIV>
<DIV CLASS="charpos" ID="B"><font color=#CC00FF>を</font></DIV>
<DIV CLASS="charpos" ID="C"><font color=#FF00CC>ち</font></DIV>
<DIV CLASS="charpos" ID="D"><font color=#FF6666>待</font></DIV>
<DIV CLASS="charpos" ID="E"><font color=#00FFCC>お</font></DIV>
<DIV CLASS="charpos" ID="F"><font color=#FF0000>く</font></DIV>
<DIV CLASS="charpos" ID="G"><font color=#FF6600>ら</font></DIV>
<DIV CLASS="charpos" ID="H"><font color=#FFCC00>ば</font></DIV>
<DIV CLASS="charpos" ID="I"><font color=#CCFF00>し</font></DIV>
<DIV CLASS="charpos" ID="J"><font color=#00FF66>今</font></DIV>
]]>
|
|
|
