Javascript浮動div寫法（轉貼）

文章由 **Weberkk** » 2013-05-22, 04:07

Javascript浮動廣告小視窗

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type">
<title>浮動圖層範例</title>
</head>
<body>
<table>
  <tr>
    <td width="100%" height="2000px">
    </td>
  </tr>
</table>
<div id="iRFloating" style="position:absolute;top:100;left:1000;">
  <table>
    <tr>
      <td valign="top">
        <a href="http://www.microsoft.com/taiwan/events/teched2008/default.aspx"><img src="http://www.microsoft.com/taiwan/msdn/image/technet.gif" border="0" /></a>
      </td>
    </tr>
  </table>
</div>
</body>
</html>
<script>
  adWidth = 160;//廣告寬度
  nowX = 1000;//目前位置(left)
  nowY = 100;//目前位置(top)
  fad_style = document.getElementById('iRFloating').style;
  function fadIni()
  {
      innerWidth = document.body.clientWidth;
      innerHeight = document.body.clientHeight;
 
      edge = (innerWidth-1000)/2;
 
      if( edge > adWidth )
      {
          posX = edge + 1000;
      }
      else
      {
          posX = innerWidth-adWidth;
      }
 
      posY = 100;
 
  }
  function fadRefresh()
  {
      offsetX = posX + document.body.scrollLeft - nowX;
      offsetY = posY + document.body.scrollTop - nowY;
      nowX += offsetX / 5;
      nowY += offsetY / 5;
      fad_style.left = nowX;
      fad_style.top = nowY;
 
      floatID = setTimeout('fadRefresh()', 20 );//Refresh時間
  }
 
  function fadStart()
  {
      fadIni();
      window.onresize=fadIni;
      fadRefresh();
  }
 
  fadStart();
</script>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

據說出處是破解巴哈姆特右邊浮動視窗而來的

文章由 **Weberkx2** » 2013-05-22, 09:49

以下為改良版，轉自http://www.zakfong.com/2012/01/javascript.html

代碼: 選擇全部

<script>
     // 右側浮動廣告寬度
     var fadrWidth = 100;
 
     // 廣告預設位置
     var fadrInitX = 0;
     var fadrInitY = 0;
 
     // 廣告位置
     var fadrX = 0; 
     var fadrY = 0;
 
     // 主要區塊大小 (廣告會置於主要區塊之右)
     var mainBlockWidth = 900;
 
     // FloatADRightInitial: 右側浮動廣告初始
     function FADR_Initial() 
     {
         // 計算廣告之位置
         var pageWidth = document.documentElement.clientWidth || document.body.clientWidth;
 
         // 計算右側寬度, 若右側寬度大於廣告寬度, 則廣告接在主要區塊之右
         var edgeRight = (pageWidth - mainBlockWidth) / 2;
 
         if (edgeRight > fadrWidth) 
         {
             fadrInitX = edgeRight + mainBlockWidth;
         }
         else 
         {
             fadrInitX = pageWidth - fadrWidth;
         }
 
         // 設定位置Y
         fadrInitY = 100;
     }
 
     // FloatAdRightRefresh: 更新視窗位置
     function FADR_Refresh() 
     {
         // 預防定義不同之設定
         var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
         var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
 
         // 計算每次更新之位移
         fadrX += (fadrInitX + scrollLeft - fadrX) / 5;
         fadrY += (fadrInitY + scrollTop - fadrY) / 5;
 
         // 更新指定圖層之位置
         var fadrStyle = document.getElementById('divFadR').style; 
         // 須加上'px'
         fadrStyle.left = fadrX + 'px';
         fadrStyle.top = fadrY + 'px';
 
         // 每次更新時間，預設為50微秒
         setTimeout('FADR_Refresh()', 50);
     }
 
     // FloatAdRightStart: 啟動
     function FADR_Start() 
     {
         FADR_Initial();
         FADR_Refresh();
     }
 
     FADR_Start();
 </script>

BK18.net

Javascript浮動div寫法（轉貼）

Javascript浮動div寫法（轉貼）

Re: Javascript浮動div寫法（轉貼）