javascript實(shí)現(xiàn)仿IE頂部的可關(guān)閉警告條
更新時(shí)間：2015年05月05日 10:03:32 投稿：hebedich
仿windows IE頂部的敬告工具條，帶關(guān)閉按鈕，設(shè)計(jì)還算精美，你完全可以用到自己的網(wǎng)頁(yè)用于顯示提示等方面，有需要的小伙伴可以參考下。
功能非常實(shí)用，代碼非常簡(jiǎn)單，就不多廢話了，直接奉上：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿IE頂部的警告條，可以關(guān)閉</title>
<style type="text/css">
#informationbar{
position: fixed;
left: 0;
width: 100%;
text-indent: 5px;
padding: 5px 0;
background-color: lightyellow;
border-bottom: 1px solid black;
font: bold 12px Verdana;
}
* html #informationbar{ /*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
</style>
<script type="text/javascript">
function informationbar(){
this.displayfreq="always"
this.content='<a href="javascript:informationbar.close()"><img src="close.gif" style="width: 14px; height: 14px; float: right; border: 0; margin-right: 5px"
/></a>'
}
informationbar.prototype.setContent=function(data){
this.content=this.content+data
document.write('<div id="informationbar" style="top: -500px">'+this.content+'</div>')
}
informationbar.prototype.animatetoview=function(){
var barinstance=this
if (parseInt(this.barref.style.top)<0){
this.barref.style.top=parseInt(this.barref.style.top)+5+"px"
setTimeout(function(){barinstance.animatetoview()}, 50)
}
else{
if (document.all && !window.XMLHttpRequest)
this.barref.style.setExpression("top", 'document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+"px" : body.scrollTop+"px"')
else
this.barref.style.top=0
}
}
informationbar.close=function(){
document.getElementById("informationbar").style.display="none"
if (this.displayfreq=="session")
document.cookie="infobarshown=1;path=/"
}
informationbar.prototype.setfrequency=function(type){
this.displayfreq=type
}
informationbar.prototype.initialize=function(){
if (this.displayfreq=="session" && document.cookie.indexOf("infobarshown")==-1 || this.displayfreq=="always"){
this.barref=document.getElementById("informationbar")
this.barheight=parseInt(this.barref.offsetHeight)
this.barref.style.top=this.barheight*(-1)+"px"
this.animatetoview()
}
}
window.onunload=function(){
this.barref=null
}
</script>
<script type="text/javascript">
<!--Invocation code-->
var infobar=new informationbar()
infobar.setContent('敬告：明天中午12點(diǎn)天降錢(qián)雨，請(qǐng)備好麻袋！ <a href="#">購(gòu)買(mǎi)麻袋</a> <a href="#">購(gòu)買(mǎi)麻袋</a>')
infobar.initialize()
</script>
</head>
<body>
</body>
</html>
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
相關(guān)文章
this是javascript的一個(gè)關(guān)鍵字，隨著函數(shù)使用場(chǎng)合不同，this的值會(huì)發(fā)生變化。但是總有一個(gè)原則，那就是this指的是調(diào)用函數(shù)的那個(gè)對(duì)象。今天我們就來(lái)詳細(xì)探討下this的使用2016-07-07
這篇文章主要介紹了BootStrap導(dǎo)航欄問(wèn)題記錄,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-07-07
js將字符串轉(zhuǎn)成正則表達(dá)式的實(shí)現(xiàn)方法
js將字符串轉(zhuǎn)成正則表達(dá)式的實(shí)現(xiàn)方法。其實(shí)很簡(jiǎn)單哦！需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
怎樣用JavaScript實(shí)現(xiàn)原型模式
這篇文章主要介紹了怎樣用JavaScript實(shí)現(xiàn)原型模式，想學(xué)習(xí)設(shè)計(jì)模式的同學(xué)，可以參考下2021-04-04
本篇文章主要介紹了詳解webpack性能優(yōu)化——DLL，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
JS如何實(shí)現(xiàn)頁(yè)面截屏功能實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于JS如何實(shí)現(xiàn)頁(yè)面截屏功能的相關(guān)資料,文中主要利用了html2canvas和canvas繪制兩個(gè)方法來(lái)實(shí)現(xiàn),需要的朋友可以參考下2021-06-06
JS Object構(gòu)造函數(shù)之Object.freeze
這篇文章主要介紹了JS Object構(gòu)造函數(shù)之Object.freeze，對(duì)JS感興趣的同學(xué)，可以深入了解下2021-04-04
本篇文章主要介紹了利用javascript判斷文件是否存在的方法。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
文件上傳功能在各大網(wǎng)站經(jīng)常會(huì)用到，今天小編通過(guò)本文給大家介紹了WEB前端實(shí)現(xiàn)裁剪上傳圖片功能的相關(guān)資料,需要的朋友可以參考下2016-10-10
P3P Header解決Cookie跨域的問(wèn)題，需要的朋友可以參考一下2013-03-03