バナー効果 1
Kodayan Homepage
2つのボタンを重ねて配置し、上側ボタンの幅を0から広げていく。同時にその背景色をランダムに変更
Kodayan Homepage
2つのボタンを重ねて配置し、上側ボタンの幅を0から広げていく。同時にその背景色をランダムに変更
Sample Source......................................................................>>>
<script language="JavaScript"><!--
var c1 = "color1"; //文字列変数
var c2 = "color2"; //文字列変数
function Change(){
if(document.all(c2).style.pixelHeight<=50){
//上に配置したﾎﾞﾀﾝを上方向に拡大していく
document.all(c2).style.pixelTop -= 1;
document.all(c2).style.pixelHeight += 1;
}else{
//2つのﾎﾞﾀﾝの重ね順を入れ換える
document.all(c1).style.zIndex = -2;
document.all(c2).style.zIndex = -3;
//上に配置したﾎﾞﾀﾝの初期位置と幅を初期化
document.all(c1).style.pixelHeight = 0;
document.all(c1).style.pixelTop = 110;
c = RandomColor();
document.all(c1).style.backgroundColor =
"#" + c;
temp = c1; //以下3行で、c1,c2の文字列変数の内容を入れ換える
c1 = c2;
c2 = temp;
}
}
function RandomColor(){
//ﾗﾝﾀﾞﾑ色を作成する関数
var c = new String(); //文字列ｵﾌﾞｼﾞｪｸﾄ"c"を定義
for(i=0;i<3;i++){
rc1 = Math.floor(Math.random()*255); //0〜254の乱数を生成
rc2 = rc1.toString(16); //16進数に変換
if(rc2.length<2)rc2 = "0" + rc2;
//1桁の場合は0を付ける
c = c + rc2; //色指定の
RRGGBB 形式を生成
}
return c;
}
//--></script>
</head>
<body onload="timerID=setInterval('Change()',50);" ;>
<button id="color1" style="position:absolute;top:60;left:50;
width:350;height:50;background-color:green;z-index:-3">
</button>
<button id="color2" style="position:absolute;top:110;left:50;
width:350;height:0;background-color:pink;z-index:-2">
</button>
<div style="position:absolute;top:60;left:70;color:navy;
font:italic bold 24pt 'Comic Sans MS'">
<p>Kodayan Homepage</p>
</div>
end(最終更新:12/11/12)