且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

js浮动广告框(可根据屏幕大小自动调整位置)

更新时间:2022-10-04 15:09:39

js浮动广告框(可根据屏幕大小自动调整位置)

左下角

右下角

 


  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=GBK" /> 
  5. </head> 
  6. <body> 
  7.  
  8. <style type="text/css">  
  9. #rbbox{ 
  10.     border:1px solid #f00; 
  11.     width:180px; 
  12.     height:0px; 
  13.     margin:0px; 
  14.     padding:0px; 
  15.     overflow:hidden; 
  16.     position:absolute; 
  17.     left:0; 
  18.     bottom:0; 
  19. .vipall{ 
  20.     border:0px solid #00f; 
  21.     background:url(images/booking.jpg) no-repeat; 
  22.     width:180px; 
  23.     height:150px; 
  24.     margin:0px; 
  25.     padding:0px; 
  26.     position:relative; 
  27. .vipclose{ 
  28.     border:0px solid #f00; 
  29.     font-size:12px; 
  30. .vipclose a{ 
  31.     text-decoration:none; 
  32.     color:#444; 
  33. .vipclose a:hover{ 
  34.     text-decoration:none; 
  35. </style>  
  36.  
  37.  
  38. <div id="rbbox"> 
  39.     <div class="vipclose"><a href="#" onclick="closeBox()">关闭</a></div> 
  40.     <a href="http://www.test.com/booking/" style="cursor:pointer"><div class="vipall"></div></a> 
  41. </div> 
  42.  
  43. <script language="javascript" type="text/javascript">  
  44. window.onload=function(){showBox();setTimeout("closeBox()",300000)}  
  45. function showBox(o){  
  46. if (o==undefined) o=document.getElementById("rbbox");  
  47. oo.style.height=o.clientHeight+2+"px";  
  48. if (o.clientHeight<180) setTimeout(function(){showBox(o)},5);  
  49. }  
  50. function closeBox(){document.getElementById("rbbox").style.display="none";}  
  51. </script>  
  52.  
  53. </body> 
  54. </html> 

 




      本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/928665,如需转载请自行联系原作者