JS实现广告浮动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>浮动广告</title>
<script type="text/javascript">

    var tips;
    var theTop = 50/*这是默认高度,越大越往下*/;
    var old = theTop;
   
    function initFloatTips() {
      tips = document.getElementById("QQFloat");
      moveTips();
    };
   
    function moveTips() {
      var tt=10;
      if (window.innerHeight) {
        pos = window.pageYOffset
      }
      else if (document.documentElement && document.documentElement.scrollTop) {
        pos = document.documentElement.scrollTop
      }
      else if (document.body) {
        pos = document.body.scrollTop;
      }

      pos=pos-tips.offsetTop+theTop;
      pos=tips.offsetTop+pos/10;
    
      if (pos < theTop) pos = theTop;
      if (pos != old) {
        tips.style.top = pos+"px";
        tt=10;
      //alert(tips.style.top);
      }
      old = pos;
      setTimeout(moveTips,tt);
    }

 window.onload=initFloatTips;
</script>
</head>
<body>
<div id="QQFloat" style="top:50px;position: absolute;border:dashed 1px #F90;line-height:20px; 100px;">
浮动广告<br>
浮动广告<br>
浮动广告<br>
浮动广告<br>
浮动广告<br>
浮动广告<br>
浮动广告<br>
浮动广告<br>
</div>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p><p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p><p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p><p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p><p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;</p>
</body>
</html>

原文地址:https://www.cnblogs.com/liyuxin/p/2044175.html