自制的网页顶部的工具条，带关闭功能

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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>
<title>网页顶部弹出的可关闭广告层</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<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{
	position: absolute;
	width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px": body.clientWidth+"px");
}
</style>
</head>
<body>

<script type="text/javascript">
function informationbar(){
	this.displayfreq="always"
	this.content='<a href="javascript:informationbar.close()"><img src="//ku.shouce.ren/files/images/201601/56a321526a8f0.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
}
//Invocation code
var infobar=new informationbar()
infobar.setContent('2011年新的一年即将到来，再此祝您在新的一年里工作愉快，生活美满。')
infobar.initialize()
</script>
</body>
</html>

AخA
 
<!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>
<title>网页顶部弹出的可关闭广告层</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<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;

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...​x
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

自制的网页顶部的工具条，带关闭功能

分类

网站常用

描述

自制的网页顶部的工具条菜单，可放网站公告，或一些导航菜单，不需要的时候可以关闭，不过希望大家还是不要用这种形式的工具条，因为与IE默认的阻止弹窗的工具条有点相似，会误导用户哦。