您當前位置：首頁 > web前端 > 特效 > 網頁尾部的浮動指示框，始終在網頁底部

網頁尾部的浮動指示框，始終在網頁底部

來源：程序員人生發布時間：2014-06-06 20:39:16 閱讀次數：3990次

　　網頁中的浮動指示框，浮動提示框，用于顯示信息，可以使用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.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></div>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 在 Access 中使用“存儲過程”

下一篇 10大HTML標簽常犯的錯誤看你錯了幾個

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

網頁尾部的浮動指示框，始終在網頁底部