js 跟随滚动的右侧浮动层

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
  2  
  3 <html>
  4  <head>
  5      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6      <title>无标题文档</title>
  7      <!--***********开始*************-->
  8  
  9     <script type="text/javascript">
 10          //<![CDATA[  
 11         var tips; var theTop = 200/*这是默认高度,越大越往下*/; var old = theTop;
 12          function initFloatTips() {
 13              tips = document.getElementById('floatTips');
 14              moveTips();
 15          };
 16          function moveTips() {
 17              var tt = 50;
 18              if (window.innerHeight) {
 19                  pos = window.pageYOffset
 20              }
 21              else if (document.documentElement && document.documentElement.scrollTop) {
 22                  pos = document.documentElement.scrollTop
 23              }
 24              else if (document.body) {
 25                  pos = document.body.scrollTop;
 26              }
 27              pos = pos - tips.offsetTop + theTop;
 28              pos = tips.offsetTop + pos / 10;
 29              if (pos < theTop) pos = theTop;
 30              if (pos != old) {
 31                  tips.style.top = pos + "px";
 32                  tt = 10;
 33              }
 34              old = pos;
 35              setTimeout(moveTips, tt);
 36          }
 37  
 38         //!]]>  
 39     </script>
 40  
 41     <style type="text/css">
 42          .floatTips
 43          {
 44              position: absolute;
 45              border: solid 1px #777;
 46              padding: 3px;
 47              top: 250px;
 48              right: 5px;
 49              width: 30px;
 50              height: 300px;
 51              background: #cccccc;
 52              color: white;
 53          }
 54          .showDiv
 55          {
 56              position: absolute;
 57              border: solid 1px #777;
 58              padding: 3px;
 59              top: 250px;
 60              right: 5px;
 61              width: 300px;
 62              height: 300px;
 63              background: #cccccc;
 64              color: white;
 65          }
 66      </style>
 67  
 68     <script type="text/javascript">
 69          function FunOnmouseUp() {
 70              var objFloatTips = $("floatTips");
 71              var objActivityContext = $("activityContext");
 72              objFloatTips.className = "showDiv";
 73              objActivityContext.style.display = "";
 74          }
 75          function FunMouseOut() {
 76              var objFloatTips = $("floatTips");
 77              var objActivityContext = $("activityContext");
 78              objFloatTips.className = "floatTips";
 79              objActivityContext.style.display = "none";
 80          }
 81  
 82         function $(objID) {
 83              return document.getElementById(objID);
 84          }
 85      </script>
 86  
 87 </head>
 88  <body onload="initFloatTips()">
 89      <div id="floatTips" onmouseover="FunOnmouseUp()" onmouseout="FunMouseOut()" class="floatTips">
 90          最新的活动
 91          <div id="activityContext" style="display: none">
 92              显示最新的活动
 93          </div>
 94      </div>
 95      <!--**********结束***************-->
 96      <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F7F7F7">
 97          <tr>
 98              <td height="2101">
 99              </td>
100          </tr>
101      </table>
102  </body>
103  </html>