DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript實現仿IE頂部的可關閉警告條
javascript實現仿IE頂部的可關閉警告條
編輯:關於JavaScript     

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

<!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">
<!--Invocation code-->
var infobar=new informationbar()
infobar.setContent('敬告:明天中午12點天降錢雨,請備好麻袋!  <a href="#">購買麻袋</a>  <a href="#">購買麻袋</a>')
infobar.initialize()
</script>
</head>
<body>
</body>
</html>

以上所述就是本文的全部內容了,希望大家能夠喜歡。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved