[awei研究室]JAVASCRIPT_側邊浮動廣告

2015.03.24 / 分類: awei研究室, JQUERY &CSS特效 / 0 則回應

客戶有時會抱怨固定式的廣告效果不佳，即使設計者很用心的利用GIF或是賈伯斯討厭的FLASH作的動畫來吸引瀏覽者
，只要捲軸一拉就失去廣告的機會。
而浮動廣告也是時下網上較爲流行的廣告形式之一，利用DIV浮動區塊不會隨著畫面捲動而消失。
可以將想特別強調的內容、傳達的訊息、甚至是廣告內容放入此區塊內，加上一些滑入特效就是一個好的跟隨式廣告
我習慣稱作影子廣告~~因為它如影隨形的跟著你….不點廣告不放手

利用Javascript+DIV可以很簡單的作出這種效果

首先我們先製作一個夠長的視窗

<table>
  <tr>
    <td width="100%" height="2000px">
    </td>
  </tr>
</table>

然後設定浮動DIV區塊

<div id="wei_float" style="position:absolute;top:100;left:1000;">
  <table>
    <tr>
      <td valign="top">
        <a href="#"><img src="weiflicklogo.jpg" border="0" /></a>
      </td>
    </tr>
  </table>
</div>

Javascript語法(請嵌入至文件結尾處程式碼移至程式結尾處，也就是之前一段的位置)

<script>
  adWidth = 160;//廣告寬度

  nowX = 0;//目前位置(left)
  nowY = 100;//目前位置(top)

  fad_style = document.getElementById('wei_float').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>

會慢慢的滑到右邊~~~~

範例

另外網路上有另一個改良版由Zak Fong提供

Javascript語法(請嵌入至文件結尾處程式碼移至程式結尾處，也就是之前一段的位置)

<script>
     // 右側浮動廣告寬度
     var fadrWidth = 100;
 
     // 廣告預設位置
     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>

範例