省資源的 javascript 浮動視窗 div 完成

JavaScript 相關知識分享、討論

版主: Cherry

回覆文章
頭像
Weberkk
LV9-見習僧侶
LV9-見習僧侶
文章: 177
註冊時間: 2013-04-03, 00:24
: 傳說中的WB

省資源的 javascript 浮動視窗 div 完成

文章 Weberkk »

省資源的 javascript 浮動視窗 div 完成,程式碼開放給需要的人!!

特色:用較低的頻率檢測是否位移,若有位移才切換為高頻率移動模式
   移動到定點之後,繼續變回靜止模式,省資源不LAG

By.Weberkk 2013 05 22 http://twnpc.com/" rel="nofollow
FAD_Div.PNG
FAD_Div.PNG (115.32 KiB) 已瀏覽 14299 次
要浮動的 div 請設為

<div id="FAD_Div" style="position:absolute;">

代碼: 選擇全部

<script type="text/javascript">

     // 省資源的右側浮動視窗 div
     // 特色:用較低的頻率檢測是否位移,若有位移才切換為高頻率移動模式
     //    移動到定點之後,繼續變回靜止模式,省資源不LAG
     // By.Weberkk 2013 05 22  http://twnpc.com/
     
     // 右側浮動廣告寬度
     var FAD_Width = 185;
     var FAD_Style = document.getElementById('FAD_Div').style; 
 
     // 主要區塊大小 (廣告會置於主要區塊之右)
     var FAD_mainBlockWidth = 1014;
     var FAD_PaddingRight = 818;

     var FAD_PWidth = document.body.clientWidth;
     var FAD_Edge = (FAD_PWidth - FAD_mainBlockWidth) / 2;
     var FAD_LastPWidth = FAD_PWidth;

     // 廣告目標位置
     
     var FAD_X = FAD_Edge + FAD_PaddingRight;
     var FAD_Y = 202;
     
     var FAD_SetY = false;
     var FAD_ScrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
     var FAD_LastScrollY = FAD_ScrollY;
     var FAD_TargetY = FAD_Y + FAD_ScrollY;
     
     // 廣告位置
     // var FAD_NowX = FAD_X;
     var FAD_NowY = FAD_TargetY;

     // 更新指定圖層之位置
         FAD_Style.left = FAD_X + 'px';
         FAD_Style.top = FAD_NowY + 'px';

     var FAD_N = 0;
     var FAD_Temp = 0;
     
     function FAD_ChackX() 
     {
         FAD_PWidth = document.body.clientWidth;
         if (FAD_PWidth < FAD_mainBlockWidth)
         {
         FAD_PWidth = FAD_mainBlockWidth
         }
         if (FAD_LastPWidth != FAD_PWidth)
         {
         FAD_LastPWidth = FAD_PWidth;
         FAD_Edge = (FAD_PWidth - FAD_mainBlockWidth) / 2;
         FAD_X = FAD_Edge + FAD_PaddingRight;
         FAD_Style.left = FAD_X + 'px';
         }
     }
     function FAD_ChackY() 
     {
         // 預防定義不同之設定
         FAD_ScrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
         if (FAD_LastScrollY != FAD_ScrollY)
         {
         FAD_LastScrollY = FAD_ScrollY;
         FAD_TargetY = FAD_Y + FAD_ScrollY;
         FAD_SetY = true;
         }
     }

     function FAD_Fix() 
     {
        if ( FAD_Temp <= 3 ) {
        } else if ( FAD_Temp > 1250 ) {
        FAD_Temp = FAD_Temp - 1250        
        } else {
        FAD_Temp = FAD_Temp / 5
        }
     }

     // FloatAdRightRefresh: 更新視窗位置
     function FAD_Core() 
     {
      if (FAD_SetY) {
        //定期 chack Y
        if (FAD_N < 5) {
        FAD_N++
        } else {
        FAD_N=0
        FAD_ChackY();
        }
        //移動div Y
        FAD_Temp = (FAD_TargetY - FAD_NowY);
        if (FAD_Temp != 0) {
          if (FAD_Temp > 0) {
          FAD_Fix();
          } else {
          FAD_Temp = (0 - FAD_Temp);
          FAD_Fix();
          FAD_Temp = (0 - FAD_Temp);
          }
          FAD_NowY += FAD_Temp;
          FAD_Style.top = FAD_NowY + 'px';
          setTimeout('FAD_Core()', 15);
        } else {
          FAD_SetY = false;
          FAD_N=0
          setTimeout('FAD_Core()', 300);
        }
      } else {
        FAD_ChackX();
        FAD_ChackY();
        setTimeout('FAD_Core()', 300);
      }  
     }
 
     // ====== 啟動 =======
     FAD_Core();

 </script>
回覆文章