您当前位置：首页 > web前端 > 特效 > 网页尾部的浮动指示框，始终在网页底部

网页尾部的浮动指示框，始终在网页底部

来源：程序员人生发布时间：2014-06-06 20:39:16 阅读次数：3713次

　　网页中的浮动指示框，浮动提示框，用于显示信息，可以使用HTML语法，注意引号用法，单套双。

　　在JAVAsCRITP代码内，变量displaymode有三种模式：0 代表信息永远显示，1 代表信息只显示一段时间，2为随机显示模式;

　　演示：

<html><head><title>网页中的浮动指示框</title><style type="text/css"></style></head><body><script language="javascript">//显示的信息，可以使用HTML语法，注意引号用法，单套双。var message='<table border=1 width=100 bordercolorlight=000000 cellspacing= 0 cellpadding= 0 bordercolor=FFFFFF><tr><td width=100><font face="Arial"><b>News!</b></font></td></tr><tr><td width=100><a href=#><nobr>本站功能已经开放。</a><a href=#><br>中青队四国邀请赛表现不俗。</a><a href=http://www.liehuo.net><br>网——请点击这里</a></td></tr></table>'//背景色var backgroundcolor="#a0a0ff"//0 代表信息永远显示，1 代表信息只显示一段时间，2为随机显示模式；var displaymode=1//如果显示模式为在指定时间内显示，输入时间段(1000为1秒)；var displayduration=10000//1代表闪烁，0代表不闪烁；var flashmode=1//如果设置了闪烁，输入闪烁的颜色；var flashtocolor="e0e0ff"////下面不必修改////var which=0 //状态标志function regenerate(){window.location.reload() //刷新页面}function regenerate2(){if (document.layers)setTimeout("window.onresize=regenerate",400) //每400毫秒设定一次onresize属性，以便在窗口改变大小时及时刷新}function display2(){if (document.layers){ //如果浏览器是NSif (topmsg.visibility=="show") //如果浮动层当前可见topmsg.visibility="hide" //则将其隐藏else //否则topmsg.visibility="show" //将其显示出来}else if (document.all){ //如果浏览器是IEif (topmsg.style.visibility=="visible") //如果浮动层当前可见topmsg.style.visibility="hidden" //则将其隐藏else //否则topmsg.style.visibility="visible" //将其显示出来//在10秒到20秒之间的随机延时后重新执行，交替显示和隐藏，形成闪烁效果。setTimeout("display2()",Math.round(Math.random()*10000)+10000)}}function flash(){ //形成闪烁效果if (which==0){ //根据状态标志决定操作，如果需要改变背景色if (document.layers) //如果是NStopmsg.bgColor=flashtocolor //则利用bgColor改变背景色到flashtocolorelse //如果是IEtopmsg.style.backgroundColor=flashtocolor //则利用style.backgroundColor改变背景色到flashtocolorwhich=1 //切换状态标志，下一次操作为恢复背景色}else{ //如果本次操作需要恢复背景色if (document.layers) //如果是NStopmsg.bgColor=backgroundcolor //则利用bgColor恢复背景色到backgroundcolorelse //如果是IEtopmsg.style.backgroundColor=backgroundcolor //则利用style.backgroundColor恢复背景色到backgroundcolorwhich=0 //切换状态标志，下一次操作为改变背景色}}if (document.all){ //如果是IE，则写入显示所需要的浮动层.document.write('<span id="topmsg" style="position:absolute;visibility:hidden">'+message+'</span>')}function logoit(){ //以IE兼容方式调整浮动层位置document.all.topmsg.style.left=document.body.scrollLeft+document.body.clientWidth/2-document.all.topmsg.offsetWidth/2document.all.topmsg.style.top=document.body.scrollTop+document.body.clientHeight-document.all.topmsg.offsetHeight-4}function logoit2(){ //以NS兼容方式调整浮动层位置topmsg.left=pageXOffset+window.innerWidth/2-topmsg.document.width/2 //将浮动层调到页面中部topmsg.top=pageYOffset+window.innerHeight-topmsg.document.height-5 //将浮动层调到页面底部setTimeout("logoit2()",90) //90毫秒后再次调整位置，以保持其始终居于页面底部中间}function setmessage(){document.all.topmsg.style.left=document.body.scrollLeft+document.body.clientWidth/2-document.all.topmsg.offsetWidth/2 //设定浮动层在页面中间document.all.topmsg.style.top=document.body.scrollTop+document.body.clientHeight-document.all.topmsg.offsetHeight-4 //设定浮动层在页面底部document.all.topmsg.style.backgroundColor=backgroundcolor //设定浮动层背景颜色document.all.topmsg.style.visibility="visible" //将浮动层设为可见if (displaymode==1) //如果只需要显示一段时间setTimeout("topmsg.style.visibility='hidden'",displayduration) //则用setTimeout设定超时，让浮动层在一端时间后隐藏else if (displaymode==2) //如果需要闪烁显示display2() //则调用display2过程进行随即消隐显示if (flashmode==1) //如果需要闪烁setInterval("flash()",1000) //设定每一秒进行一次闪烁window.onscroll=logoit //当进行页面卷动的时候重新调整层的位置window.onresize=new Function("window.location.reload()") //当窗口改变大小时则刷新本页}function setmessage2(){topmsg=new Layer(window.innerWidth) //利用new Layer生成浮动层topmsg.bgColor=backgroundcolor //设定浮动层的背景颜色regenerate2() //调用regenerate2，以便在必要的时候刷新页面topmsg.document.write(message) //将消息内容以文本流形式写进浮动层topmsg.document.close() //关闭文本流logoit2() //调整浮动层位置topmsg.visibility="show" //使浮动层可见if (displaymode==1) //如果只显示一次setTimeout("topmsg.visibility='hide'",displayduration) //则在延时displayduration毫秒后消隐浮动层else if (displaymode==2) //如果是设定是随机显示display2() //则调用display2进行随机显示if (flashmode==1) //如果需要闪烁setInterval("flash()",1000) //则设定闪烁时钟}if (document.layers) //如果是NSwindow.onload=setmessage2 //在页面装入的时候，启动setmessage2else if (document.all) //如果是IEwindow.onload=setmessage //则在页面装入的时候启动setmessage</script><font size=5><b>欢迎光临我的网页</b></font></body></html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></div>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 在 Access 中使用“存储过程”

下一篇 10大HTML标签常犯的错误看你错了几个

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点