喵喵笨兔の喵喵的家~遊戲天地

隨網頁捲軸捲動移位的浮動視窗【範例二】 (javascript) 飄浮式

隨網頁捲軸捲動移位的浮動視窗........程式碼範例結果如右側的浮動視窗 →

程式碼：主要看紅色字部份，或直接複製所有程式碼，另存成一個 html 檔來觀看使用唄 ^^

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>喵喵笨兔 の 喵喵的家~遊戲天地 - 側邊浮動廣告</title>
</head>

<body>

<div id="divFadR" style="position:absolute;top:100;left:1000;">
  <table border="1">
    <tr>
      <td valign="top" align="center">
        <a href="#"><img src="gif/logo.gif" border="0" /><br>喵喵笨兔</a>
      </td>
    </tr>
  </table>
</div>

<div style="height: 1000px"></div>

<script>
     // 右側浮動廣告寬度
     var fadrWidth = 250;
 
     // 廣告預設位置
     var fadrInitX = 0;
     var fadrInitY = 0;
 
     // 廣告位置
     var fadrX = 0; 
     var fadrY = 0;
 
     // 主要區塊大小 (廣告會置於主要區塊之右)
     var mainBlockWidth = 1000;
 
     // 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>

</body>
</html>

笨兔隨手筆記於 2017/10/03

喵喵笨兔の喵喵的家~遊戲天地
http://vv0817.tk
http://vvv.lionfree.net
http://qo3op.asuscomm.com/vvv
https://uoedgpkhyfwzmd7zua8myg-on.drv.tw/vvv