1

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

2 回答 2

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 回答
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 回答