javascript实现仿IE顶部的可关闭警告条
功能非常实用,代码非常简单,就不多废话了,直接奉上:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>仿IE顶部的警告条,可以关闭</title>
<styletype="text/css">
#informationbar{
position:fixed;
left:0;
width:100%;
text-indent:5px;
padding:5px0;
background-color:lightyellow;
border-bottom:1pxsolidblack;
font:bold12pxVerdana;
}
*html#informationbar{/*IE6hack*/
position:absolute;
width:expression(document.compatMode=="CSS1Compat"?document.documentElement.clientWidth+"px":body.clientWidth+"px");
}
</style>
<scripttype="text/javascript">
functioninformationbar(){
this.displayfreq="always"
this.content='<ahref="javascript:informationbar.close()"><imgsrc="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('<divid="informationbar"style="top:-500px">'+this.content+'</div>')
}
informationbar.prototype.animatetoview=function(){
varbarinstance=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>
<scripttype="text/javascript">
<!--Invocationcode-->
varinfobar=newinformationbar()
infobar.setContent('敬告:明天中午12点天降钱雨,请备好麻袋!<ahref="#">购买麻袋</a><ahref="#">购买麻袋</a>')
infobar.initialize()
</script>
</head>
<body>
</body>
</html>
以上所述就是本文的全部内容了,希望大家能够喜欢。