js实现带关闭按钮始终显示在网页最底部工具条的方法
本文实例讲述了js实现带关闭按钮始终显示在网页最底部工具条的方法。分享给大家供大家参考。具体如下：
这是一款很实用的代码，给网页加入一个始终显示在浏览器窗口底部的工具栏，可以在上面放上公告，联系人等等信息，此代码的工具条还带有关闭按钮，可以随时关闭
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>固定底（顶）部菜单</title>
<scripttype="text/javascript"src="js/jquery1.3.2.js"></script>
<style>
body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}img{border:none;}em{font-style:normal;}
a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();}
a:hover{color:#000;text-decoration:underline;}
body{font-size:12px;font-family:Arial,Verdana,Helvetica,sans-serif;word-break:break-all;word-wrap:break-word;}
.bnav{text-align:left;height:25px;overflow:hidden;width:98%;line-height:25px;background:#fff;margin:01%;border:#B4B4B41pxsolid;border-bottom:none;z-index:999;position:fixed;bottom:0;left:0;_position:absolute;/*forIE6*/_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);/*forIE6*/overflow:visible;}
.close{position:absolute;right:5px;height:25px;width:16px;text-indent:-9999px;padding-left:10px;}
.closea{background:url(../images/201008/close.gif)no-repeatcenter;width:16px;display:block;}
.bnav2{height:24px;line-height:24px;margin:1px;margin-bottom:0;background:#E5E5E5;}
.bnav.s1{position:absolute;left:10px;}
.bnav.s1img{padding-top:3px;margin-right:7px;}
.bnav.s2{position:absolute;right:30px;color:#888;}
.bnav.s2span{padding-right:10px;}
.bnav.s2a{margin:06px;}
.rolltext{position:absolute;left:160px;height:25px;line-height:25px;overflow:hidden;}
.rolltextdt,.rolltextdd{float:left;width:auto;}
.rolltexta{display:block;height:25px;overflow:hidden;}
.bnav3{height:25px;width:16px;line-height:25px;margin:01%;padding-right:6px;border-bottom:none;z-index:999;position:fixed;bottom:0;right:0;_position:absolute;/*forIE6*/_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);/*forIE6*/overflow:visible;}
.bnav3a{background:url(../images/201008/open.gif)no-repeatcenter;display:block;height:25px;width:16px;text-indent:-5000px;}
</style>
</head>
<body>
<scripttype="text/javascript">
varcloseBN=$.cookie("bnav");
if(closeBN=="0"){closeNav();}
functionshowNav(){
$(".openClose").toggle();
$.cookie("bnav","1",{expires:1});
}
functioncloseNav(){
$(".openClose").toggle();
$.cookie("bnav","0",{expires:1});
}
//单行滚动
functionSingleScroll(){
$(".rolltextdd").animate({marginTop:"-25px"},500,function(){
$(this).css({marginTop:"0px"}).find("a:first").appendTo(this);
});
}
$(document).ready(function(){
setInterval("SingleScroll()",3000);
});
</script>
<divclass="bnavopenClose">
<divclass="bnav2">
<spanclass="s1">
<ahref="#"><imgsrc="images/201008/qqonline.gif"></a><ahref="#"><imgsrc="images/201008/qqonline2.gif"></a>
</span>
<dlclass="rolltext">
<dt>特别声明：</dt>
<dd>
<ahref="#">庆双节期间，商城有专人值班，请上帝们放心购物</a>
<ahref="#">天悦所售手机为大陆行货、全国联保商品</a>
<ahref="#">部分少量港行、欧行机器我们都已特别注明</a>
<ahref="#">请上帝们就不要再咨询同类问题啦，客服电话要爆喽</a>
</dd>
</dl>
<spanclass="s2">
<span><ahref="#">[登录]</a><ahref="#">[免费注册]</a></span><ahref="#">购物车</a>|<ahref="#">帮助中心</a>|<ahref="#">在线留言</a>
</span>
<spanclass="close"><ahref="javascript:void(0)"onclick="closeNav()"title="关闭">关闭</a></span>
</div>
</div>
<divclass="bnav3openClose"style="display:none;"><ahref="javascript:void(0)"onclick="showNav()"title="打开">打开</a></div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。