javascript實現(xiàn)仿IE頂部的可關閉警告條
更新時間:2015年05月05日 10:03:32 投稿:hebedich
仿windows IE頂部的敬告工具條,帶關閉按鈕,設計還算精美,你完全可以用到自己的網(wǎng)頁用于顯示提示等方面,有需要的小伙伴可以參考下。
功能非常實用,代碼非常簡單,就不多廢話了,直接奉上:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>仿IE頂部的警告條,可以關閉</title> <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{ /*IE6 hack*/ position: absolute; width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); } </style> <script type="text/javascript"> function informationbar(){ this.displayfreq="always" this.content='<a href="javascript:informationbar.close()"><img src="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=/" } 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 } </script> <script type="text/javascript"> <!--Invocation code--> var infobar=new informationbar() infobar.setContent('敬告:明天中午12點天降錢雨,請備好麻袋! <a href="#">購買麻袋</a> <a href="#">購買麻袋</a>') infobar.initialize() </script> </head> <body> </body> </html>
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
相關文章
Javascript(AJAX)解析XML的代碼(兼容FIREFOX/IE)
Javascript AJAX 解析XML的代碼(兼容FIREFOX/IE)2010-07-07JavaScript實現(xiàn)省市聯(lián)動效果
這篇文章主要介紹了JavaScript實現(xiàn)省市聯(lián)動效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-11-11微信小程序?qū)崿F(xiàn)經(jīng)典window掃雷游戲
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)經(jīng)典window掃雷游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-09-09(currentStyle)javascript為何有時用style得不到已設定的CSS的屬性
(currentStyle)javascript為何有時用style得不到已設定的CSS的屬性...2007-08-08fw.qq.com/ipaddress已失效 javascript獲得客戶端IP的新方法
一直以來,我都是通過http://fw.qq.com/ipaddress來獲得客戶端用戶的IP,這個方法簡單、快速、實用2012-01-01