javascript實現仿IE頂部的可關閉警告條

2024-05-06 16:19:20

字體：大中小

來源：轉載

供稿：網友

仿windows IE頂部的敬告工具條，帶關閉按鈕，設計還算精美，你完全可以用到自己的網頁用于顯示提示等方面，有需要的小伙伴可以參考下。

功能非常實用，代碼非常簡單，就不多廢話了，直接奉上：

<!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頂部的警告條，可以關閉</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">



var infobar=new informationbar()

infobar.setContent('敬告：明天中午12點天降錢雨，請備好麻袋！　<a href="#">購買麻袋</a>　　<a href="#">購買麻袋</a>')

infobar.initialize()

</script>

</head>

<body>

</body>

</html>