信息欄，一個時間段

如何得到一個列下拉從瀏覽器窗口的一段時間後，從上到下用戶已經在瀏覽網頁後滴下來？說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>

來源

2012-06-27 DiscoveryOV

你需要使用Javascript/jQuery來做到這一點，與HTML/CSS只有不可能 –

僅使用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-27 02:38:38

你能告訴我如何使用js做到這一點嗎？ – DiscoveryOV

@ R3TRI8UTI0N，我建議您使用HTML和CSS代碼的簡歷發佈其他問題。使用評論區編寫代碼將會很複雜。其他原因是因爲JavaScript/JQuery標籤在堆棧溢出中有大量活躍的用戶，所以你得到你想要的東西的機會是好的。 –

我已更新我的問題。 – DiscoveryOV

非常樣稿（沒有的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-27 04:00:41

信息欄，一個時間段

回答

相關問題