js悬浮广告收集

1、高度可设定。

js悬浮广告收集_第1张图片


<style type="text/css">
.QQbox {z-index:99;right:0;width:385px;height:113px;position:absolute;border:0px solid #f00}
.QQbox .press{right:0;width:385px;height:113px;cursor:pointer;position:absolute;border:0px solid #00f}
.close{ border:0px solid #00f;width:380px;height:18px;line-height:18px;color:#000;border:0px solid #f66;text-align:right}
</style>


<script type="text/javascript">
window.onload = window.onresize = window.onscroll = function (){
    var oBox = document.getElementById("divQQbox");
    var oMenu = document.getElementById("divMenu");
    var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    setTimeout(function (){
    clearInterval(oBox.timer);
    var iTop = parseInt((document.documentElement.clientHeight - oBox.offsetHeight)/2+240) + iScrollTop;
    oBox.timer = setInterval(function (){
    var iSpeed = (iTop - oBox.offsetTop) / 8;
    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    oBox.offsetTop == iTop ? clearInterval(oBox.timer) : (oBox.style.top = oBox.offsetTop + iSpeed + "px");
    }, 30)
    }, 100)
};
function closeBox(){document.getElementById("divQQbox").style.display="none";}
</script>


<div class="QQbox" id="divQQbox" >
    <div class="close"><a href="#"     <div id="divMenu">
        <a href="www.baidu.com" target="_blank">
            <img src="http://i.kl688.com/kl688File/2013-3/2013031311372742413.gif" class="press" />
        </a>
    </div>
</div>


2、可滑出,但高度不可指定,只能左下角 or 右下角


js悬浮广告收集_第2张图片


  
  
  
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  2. <htmlxmlns="http://www.w3.org/1999/xhtml">

  3. <head>

  4. <metahttp-equiv="Content-Type"content="text/html; charset=GBK"/>

  5. </head>

  6. <body>

  7. <styletype="text/css">

  8. <!--

  9. #rbbox{

  10.    border:0px solid #f00;

  11.    width:180px;

  12.    height:0px;

  13.    margin:0px;

  14.    padding:0px;

  15.    overflow:hidden;

  16.    position:absolute;

  17.    left:0;     //right:0;

  18.    bottom:0;

  19. }

  20. .vipall{

  21.    border:0px solid #00f;

  22.    background:#360;

  23.    width:180px;

  24.    height:150px;

  25.    margin:0px;

  26.    padding:0px;

  27.    position:relative;

  28. }

  29. .vipclose{

  30.    border:0px solid #f00;

  31.    font-size:12px;

  32. }

  33. .vipclose a{

  34.    text-decoration:none;

  35.    color:#444;

  36. }

  37. .vipclose a:hover{

  38.    text-decoration:none;

  39. }

  40. -->

  41. </style>

  42. <divid="rbbox">

  43. <divclass="vipclose"><ahref="#"onclick="closeBox()">关闭</a></div>

  44. <ahref="http://xuqin.blog.51cto.com/"style="cursor:pointer"><divclass="vipall"></div></a>

  45. </div>

  46. <scriptlanguage="javascript"type="text/javascript">

  47. <!--

  48. window.onload=function(){showBox();setTimeout("closeBox()",300000)}  

  49. function showBox(o){  

  50. if (o==undefined) o=document.getElementById("rbbox");  

  51. oo.style.height=o.clientHeight+2+"px";  

  52. if (o.clientHeight<180) setTimeout(function(){showBox(o)},5);  

  53. }  

  54. function closeBox(){document.getElementById("rbbox").style.display="none";}

  55. -->

  56. </script>

  57. </body>

  58. </html>


你可能感兴趣的:(js,悬浮广告)