HOME  >>>  HTML整理ノート  >>> DHTML -- 基本編   応用編

色変更によるバナー効果

 

 

Dynamic HTML

 

Sample Source......................................................................>>>

<script language="JavaScript"><!--
var colort1 = "fedcba9876543210";
var colort2    = "0123456789abcdef";
var n = 0;        //文字列の取得位置
var timerID;
function Start(){
  if(n < colort1.length){
    b = colort1.charAt(n);//文字列からn番目の1文字を取得
    dv.style.backgroundColor = b+b+b+b+b+b;//背景色変更
    bg.style.backgroundColor = b+b+"ff"+b+b;
    t = colort2.charAt(n);
    dv.style.color = t+t+t+t+t+t;     //文字色を変更
    dv.style.borderColor = "ff"+t+t+t+t;//枠線色を変更
    bg.style.borderColor = t+t+t+t+"ff";
    n++;
    setTimeout("Start()",200);
  }else{        //最後の文字列まで達したら、
    n = 0;        //0に初期化
    temp = colort1;    //colort1とcolort2を入れかえる
    colort1 = colort2;
    colort2 = temp;
    setTimeout("Start()",3000);
  }
}

//--></script>
</head>

<body onload="Start();">

<div id="bg" style="position:absolute;
    top:90;left:110;width:250;height:40;
    background:green;border:2 solid blue"></div>
<div id="dv" style="position:absolute;
    top:100;left:100;width:250;background:white;
    color:black;font:20pt 'Arial Black';
    text-align:center;border:2 solid red">
    Dynamic HTML
</div>


end(最終更新:12/11/12)