Question

在用户查看页面一段时间后，如何从浏览器窗口顶部向下拖动栏？说5秒。然后，此栏将向下推送页面上的所有内容，直到栏完成显示。该栏将用于显示单行文本，通知用户某事。也许在酒吧右侧有一个小小的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>

Answer 1

不能使用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>

Answer 2

非常草稿样本（没有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>

信息栏在一段时间后下降

2 个答案: