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

ホップアップ・バー

このページの上下端にマウスポインタ置けば、バーがホップアップします。

　

（ソーっと引っ張り出してください。下のバーは出にくいですが、右半分のほうがよく出ます）　

DHTMLホップアップ・バー 日付

検索サイト ［yahoo］［goo］［Google］［excite］ 時計

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

<script language="JavaScript"><!--
function BarSet(){     //ﾊﾞｰの位置と幅を初期化する
//ﾍﾟｰｼﾞ読み込み時、ｳｨﾝﾄﾞｳｻｲｽﾞ変更時、ﾍﾟｰｼﾞのｽｸﾛｰﾙ時に
//ﾊﾞｰの位置と幅を初期化する
    dv1.style.width = by.clientWidth;
    dv1.style.top = by.scrollTop - 28;
    dv2.style.width = by.clientWidth;
    dv2.style.top = by.clientHeight-10+by.scrollTop;
    opt.style.top = 30 + by.scrollTop;
    TimerSet1();
    TimerSet2();
}
function TimerSet1(){    //上ﾊﾞｰに日付を表示
  objDate=new Date(); //現在日時を取得
  Y=objDate.getFullYear(); //年を取得
  M=objDate.getMonth(); //月を取得
  D=objDate.getDate(); //日を取得
  we=new Array("日","月","火","水","木","金","土"); //配列を作成
  W=we[objDate.getDay()];
  //曜日を0〜6の数値で取得し、その数値を配列Indexに割り当てる。
  var st = Y+"年"+(M+1)+"月"+D+"日"+W+"曜日";
  sp3.innerText = st;
}

function TimerSet2(){    //下ﾊﾞｰに時刻を表示
    d = new Date();
    //時、分、秒が1桁の場合は"0"を付ける
    h = (d.getHours() >= 10) ? d.getHours() : "0"
         + d.getHours();
    m = (d.getMinutes() >= 10) ? d.getMinutes() : "0"
         + d.getMinutes();
    s = (d.getSeconds() >= 10) ? d.getSeconds() : "0"
         + d.getSeconds();
    hms = h + ":" + m + ":" + s;
    td3.innerText = hms;
  setTimeout("TimerSet2()",1000);
}

var timerShow1;
var timerHide1;
function Bar1Show(){    //ﾏｳｽｵｰﾊﾞｰで上ﾊﾞｰを表示
    clearTimeout(timerHide1);
    if(dv1.style.pixelTop < by.scrollTop){
        dv1.style.pixelTop += 1;
        timerShow1 = setTimeout("Bar1Show()",1)
    }else{
        clearTimeout(timerShow1);
    }
}
function Bar1Hide(){    //上ﾊﾞｰを隠す
    clearTimeout(timerShow1);
    if(barshow[0].checked){
        if(dv1.style.pixelTop > by.scrollTop-28){
            dv1.style.pixelTop -= 1;
            timerHide1 = setTimeout("Bar1Hide()",1)
        }else{
            clearTimeout(timerHide1);
        }
    }
}

var timerShow2;
var timerHide2;
function Bar2Show(){    //下ﾊﾞｰを表示
    clearTimeout(timerHide2);
    if(dv2.style.pixelTop > (by.clientHeight-35+by.scrollTop)){
        dv2.style.pixelTop -= 1;
        timerShow2 = setTimeout("Bar2Show()",1)
    }else{
        clearTimeout(timerShow2);
    }
}
function Bar2Hide(){    //下ﾊﾞｰを隠す
    clearTimeout(timerShow2);
    if(barshow[0].checked){
    if(dv2.style.pixelTop < (by.clientHeight-10+by.scrollTop))     {
        dv2.style.pixelTop += 1;
        timerHide2 = setTimeout("Bar2Hide()",1)
    }else{
        clearTimeout(timerHide2);
    }
    }
}

function ShowOption(){    //ｵﾌﾟｼｮﾝ設定Boxを開く
    opt.style.visibility = "visible";
}
function OptionOK(){    //ｵﾌﾟｼｮﾝ設定Boxで＜OK＞されたら
    if(barshow[0].checked)Bar1Hide();Bar2Hide();
    if(barshow[1].checked)Bar1Show();Bar2Show();

    //色の配列と、どのﾗｼﾞｵﾎﾞﾀﾝがﾁｪｯｸされたか調べ、ﾁｪｯｸされた色にする。
    upcol = new Array("deepskyblue","thistle",
            "pink","lightslategray");
    for(i = 0 ; i < upbarcolor.length ; i++){
        if(upbarcolor[i].checked){
            upbar.style.backgroundColor = upcol[i];
            break;
        }
    }
    bocol = new Array("thistle","deepskyblue",
            "pink","lightslategray");
    for(j = 0 ; j < bobarcolor.length ; j++)    {
        if(bobarcolor[j].checked){
            bobar.style.backgroundColor = bocol[j];
            break;
        }
    }

    opt.style.visibility = "hidden";     //Boxを閉じる
}
//--></script>
</head>

<body id="by" onload="BarSet();"
    onresize="BarSet();" onscroll="BarSet()">

<div id="dv1" style="position:absolute;
    left:0;height:35;"
    onmouseover="Bar1Show();"
    onmouseout="Bar1Hide();">
  <span id="upbar" style="width:100%;height:20;
    background-color:deepskyblue;border:ridge thin;">
    <span style="color:red;font:italic;">
        DynamicHTML/ﾎｯﾌﾟｱｯﾌﾟ･ﾊﾞｰ</span>
    <span style="text-align:center;">
    <button style="cursor:hand" onclick="ShowOption();">
        ﾊﾞｰ･ｵﾌﾟｼｮﾝ</button>
    </span>
    <span id="sp3" style="color:magenta;
        border:thin solid lime;
        text-align:right;">日付</span>
  </span>
</div>

<div id="opt" style="position:absolute;
    left:200;width:300;height:80;
    background-color:lavender;border:ridge thin;
    visibility:hidden">
  <div style="width:100%;background-color:navy;
    color:yellow;text-align:center;">
    option設定 </span><br>
  ■上下ﾊﾞｰの表示方法を指定<br>
    <input type="radio" name="barshow" checked>
        上下のﾊﾞｰをﾎｯﾌﾟｱｯﾌﾟさす <br>
    <input type="radio" name="barshow">
        上下のﾊﾞｰを常に表示する<br>(ﾎｯﾌﾟｱｯﾌﾟさせない)<br>
  ■上ﾊﾞｰの色を変更<br>
    <input type="radio" name="upbarcolor" checked>
        (ﾃﾞﾌｫﾙﾄ:青)
    <input type="radio" name="upbarcolor">紫
    <input type="radio" name="upbarcolor">ﾋﾟﾝｸ
    <input type="radio" name="upbarcolor">ｸﾞﾚｰ<br>
  ■下ﾊﾞｰの色を変更<br>
    <input type="radio" name="bobarcolor" checked>
        (ﾃﾞﾌｫﾙﾄ:紫)
    <input type="radio" name="bobarcolor">青
    <input type="radio" name="bobarcolor">ﾋﾟﾝｸ
    <input type="radio" name="bobarcolor">ｸﾞﾚｰ
  <button onclick="OptionOK();">＜OK＞</button>
</div>
</div>

<div id="dv2"
    style="position:absolute;left:0;height:30;"
    onmouseover="Bar2Show();"onmouseout="Bar2Hide();">

<table id="bobar"
    style="width:100%;height:20;margin-top:10px;
    background-color:thistle;border:ridge medium;">
  <tr>
    <td>検索ｻｲﾄ</td>
    <td>
    ［<a href="http://www.yahoo.co.jp/">yahoo</a>］
    ［<a href="http://www.goo.ne.jp/index.html">goo</a>］
    ［<a href="http://www.fresheye.com/">fresheye</a>］
    ［<a href="http://japan.infoseek.com/">infoseek</a>］</td>
    <td id="td3" style="color:navy;text-align:right;">時計</td>
  </tr>
</table>
</div>

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