javascript实现仿IE顶部的可关闭警告条

前端技术 2023/09/02 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>

以上所述就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/5232

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案