一段时间后下拉的信息栏答案

【问题标题】：Info bar that drops down after a time period一段时间后下拉的信息栏
【发布时间】：2012-06-27 12:04:20
【问题描述】：

如何在用户查看页面一段时间后从浏览器窗口顶部下拉到下拉条？说 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>

【问题讨论】：

您需要 Javascript/JQuery 来执行此操作，仅使用 HTML/CSS 是不可能的

标签： javascript jquery html css drop-down-menu

【解决方案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>

【讨论】：

@R3TRI8UTI0N，我建议您使用 HTML 和 CSS 代码的简历发布其他问题。使用 cmets 区域编写代码会很复杂。另一个原因是因为 Javascript/JQuery 标签在 Stack Overflow 中有大量的活跃用户，所以你得到你想要的东西的机会很大。
我发现了为什么动画看起来像是从内部出现的，margin-top 使它这样做。虽然我不知道如何让它保持在页面顶部而不被修复..编辑>如果我将位置设置为顶部，它会像我想要的那样将页面向下推，但是，它不会滚动时不要停留在页面顶部。我假设我不能这样做？
大声笑，nvm。我喜欢我现在拥有的方式。它不在顶部，但我并没有幻想它出现在网站的菜单栏下方。谢谢！
@R3TRI8UTI0N，昨天我走了，今天我看到了你的新 cmets。如果您仍需要帮助，请发表新评论。

【解决方案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>

【讨论】：