1

ユーザーがページを表示している期間が経過した後、ブラウザウィンドウの上部からバーを下にドロップするにはどうすればよいですか？5秒と言います。このバーは、バーの表示が終了するまで、ページ上のすべてのコンテンツを押し下げます。バーは、ユーザーに何かを知らせる1行のテキストを表示するために使用されます。そして多分それを閉じるためにバーの右側にある小さな小さなX。

現在、これはCSSです。

#infobar {
    border-bottom: 5px solid;
    height: 25px;
    position: fixed;
    width: 100%;
    border-bottom-color: #F00;
    background-color: #9C9;
    margin-top:-16px;
}
#infobar .text {
    color: #FFFFFF;
    float: left;
    font-family: arial;
    font-size: 12px;
    padding: 5px 0;
    position: relative;
    text-align: center;
    width: 100%;
}
#infobar .text a {
    color: #FAFAFA;
}
#infobar .text a:hover {
    color: #FFE2A0;
}

</style>

そしてHTML：

<div id="infobar">
<div class="text">
....this is the bar text....
</div>
</div>
4

2 に答える 2

0

非常に下書きのサンプル (jquery なし):

CSS の変更

body { 
    margin:0; padding: 10px
}
#infobar {
    border-bottom: 5px solid;
    height: 25px;
    position: fixed;
    width: 100%;
    border-bottom-color: #F00;
    background-color: #9C9;
    top: -30px;
    left: 0;
}

最小限の JavaScript

var topMargin = 0;

function letsgo()
{
    setTimeout("showinfo()", 5000);
}

function showinfo()
{
    document.body.style.marginTop = (topMargin++) + 'px';
    document.getElementById('infobar').style.top = (topMargin - 30) + 'px';
    if (topMargin < 30) setTimeout("showinfo()", 10);
}

function hideinfo()
{
    document.body.style.marginTop = (--topMargin) + 'px';
    document.getElementById('infobar').style.top = (topMargin - 30) + 'px';
    if (topMargin > 0) setTimeout("hideinfo()", 10);
}

window.onload = letsgo;

最後にいくつかの HTML

<div id="infobar" onclick="hideinfo()">infobar content</div>
于 2012-06-27T04:00:41.720 に答える
0

アニメーションと時間制御が必要なため、HTML/CSS のみを使用することはできません。Javascript/JQuery や Flash などの追加のテクノロジが必要になります。

編集1

以下のコードはあなたが望むことをすると思います。

CSS

<style type="text/css">

#infobar {
    display:none;
    border-bottom: 5px solid;
    height: 25px;
    position: fixed;
    width: 100%;
    border-bottom-color: #F00;
    background: #9C9;
    margin-top:-16px;
}
#infobar .text {
    color: #FFFFFF;
    float: left;
    font:12px arial;
    padding: 5px 0;
    position: relative;
    text-align: center;
    width: 100%;
}
#infobar .text a {
    color: #FAFAFA;
}
#infobar .text a:hover {
    color: #FFE2A0;
}

#close {
    color: red;
    float:right;
}

</style>

JavaScript / JQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(window).load( function() {

         setTimeout( function() {

             $("#infobar").slideToggle("fast");

         }, 5000);


        $("#close").click( function() {

            $("#infobar").slideToggle("fast");
            return false;

        });


    });

</script>

HTML

<div id="infobar">
    <div class="text">
        ....this is the bar text....
        <a href="#" id="close">close</a>
    </div>
</div>
于 2012-06-27T02:38:38.457 に答える