网页顶部下垂的浮动条,有缓冲效果,可关闭

发布时间：2018-08-19 14:52:57 所属栏目：交互来源：站长网

导读：网页顶部下垂的浮动条,有缓冲效果,可关闭。该特效可以放网站公告，或一些导航菜单，比较醒目，当有人访问网站时，导航条徐徐的降下，不需要的时候可以关闭，跟IE默认的阻止弹窗的工具条有点相似，推荐使用！演示： !DOCTYPE html PUBLIC -//W3C//DTD XHTM

　　网页顶部下垂的浮动条,有缓冲效果,可关闭。该特效可以放网站公告，或一些导航菜单，比较醒目，当有人访问网站时，导航条徐徐的降下，不需要的时候可以关闭，跟IE默认的阻止弹窗的工具条有点相似，推荐使用！

　　演示：

<!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="/uploads/allimg/1101/bar_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=/" } // 烈火網 liehuo.net 欢迎复制,拒绝恶意采集ｌｉｅｈｕｏ．ｎｅｔ 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('欢迎访问烈火网 http://Www.Liehuo.Net，祝大家2011年工作愉快、万事顺心！') infobar.initialize() </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：91站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!