javascript实现仿IE顶部的可关闭警告条

仿windows IE顶部的敬告工具条，带关闭按钮，设计还算精美，你完全可以用到自己的网页用于显示提示等方面，有需要的小伙伴可以参考下。

功能非常实用，代码非常简单，就不多废话了，直接奉上：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
2. <html xmlns="http://www.w3.org/1999/xhtml"> 
3. <head> 
4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
5. <title>仿IE顶部的警告条，可以关闭</title> 
6. <style type="text/css"> 
7. #informationbar{ 
8. position: fixed; 
9. left: 0; 
10. width: 100%; 
11. text-indent: 5px; 
12. padding: 5px 0; 
13. background-color: lightyellow; 
14. border-bottom: 1px solid black; 
15. font: bold 12px Verdana; 
16. } 
17. * html #informationbar{ /*IE6 hack*/ 
18. position: absolute; 
19. width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); 
20. } 
21. </style> 
22. <script type="text/javascript"> 
23. function informationbar(){ 
24. this.displayfreq="always" 
25. this.content='<a href="javascript:informationbar.close()"><img src="close.gif" style="width: 14px; height: 14px; float: right; border: 0; margin-right: 5px" 
26.  
27. /></a>' 
28. } 
29. informationbar.prototype.setContent=function(data){ 
30. this.content=this.content+data 
31. document.write('<div id="informationbar" style="top: -500px">'+this.content+'</div>') 
32. } 
33. informationbar.prototype.animatetoview=function(){ 
34. var barinstance=this 
35. if (parseInt(this.barref.style.top)<0){ 
36. this.barref.style.top=parseInt(this.barref.style.top)+5+"px" 
37. setTimeout(function(){barinstance.animatetoview()}, 50) 
38. } 
39. else{ 
40. if (document.all && !window.XMLHttpRequest) 
41. this.barref.style.setExpression("top", 'document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+"px" : body.scrollTop+"px"') 
42. else 
43. this.barref.style.top=0 
44. } 
45. } 
46. informationbar.close=function(){ 
47. document.getElementById("informationbar").style.display="none" 
48. if (this.displayfreq=="session") 
49. document.cookie="infobarshown=1;path=/" 
50. } 
51. informationbar.prototype.setfrequency=function(type){ 
52. this.displayfreq=type 
53. } 
54. informationbar.prototype.initialize=function(){ 
55. if (this.displayfreq=="session" && document.cookie.indexOf("infobarshown")==-1 || this.displayfreq=="always"){ 
56. this.barref=document.getElementById("informationbar") 
57. this.barheight=parseInt(this.barref.offsetHeight) 
58. this.barref.style.top=this.barheight*(-1)+"px" 
59. this.animatetoview() 
60. } 
61. } 
62. window.onunload=function(){ 
63. this.barref=null 
64. } 
65. </script> 
66. <script type="text/javascript"> 
67. <!--Invocation code--> 
68. var infobar=new informationbar() 
69. infobar.setContent('敬告：明天中午12点天降钱雨，请备好麻袋！ 　<a href="#">购买麻袋</a>　　<a href="#">购买麻袋</a>') 
70. infobar.initialize() 
71. </script> 
72. </head> 
73. <body> 
74. </body> 
75. </html> 

以上所述就是本文的全部内容了，希望大家能够喜欢。