JavaScript – 浮動廣告
說明
最近客戶要求網頁上有浮動廣告，這個理論上是小問題，因為以前早就寫過一支。但是沒想到臨時卻找不到Code，於是先上網找找。
找到了Code，但是掛在單頁HTML下可以跑，改成ASPX卻不能跑了。我正納悶是怎麼一回事，原來是因為Visual 2005之後ASPX最上面的聲明是遵循XHTML 1.0 Transitional。
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
而不是舊有Visual 2003的 HTML 4.0。
1: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
所以不支援語法中的「onscroll」事件等等。
解決方法
解決方式如下→
1. 改聲明
2. 改用CSS
3. 改Code
那就來改Code吧，有幾個地方要注意
1. 首先網路上用的Code，其實可以不用註冊「onscroll」事件，把它改成自有迴圈 (也就是開始後就一直檢查目前的位置)，就可以避過事件處理的問題。
2. 之前可以直接指定div中top, left屬性為數字，但是換了聲明之後，不能只是用數字，還須加上單位 (如: px)。
3. document.body.scrollTop的問題。若頁面指定或未指定DOCTYPE時，瀏覽器的解釋方式不同。所以有使用聲明指定DOCTYPE時，就要用document.documentElement.scrollTop (W3C標準)；未指定時，就要用document.body.scrollTop；或是利用一個變數來處理差異:
1: var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
網路上還有用加起來的方式判定:
1: var scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
4. 廢說少說，直接看Code
1: <script>
2: // 右側浮動廣告寬度
3: var fadrWidth = 100;
4:
5: // 廣告預設位置
6: var fadrInitX = 0;
7: var fadrInitY = 0;
8:
9: // 廣告位置
10: var fadrX = 0;
11: var fadrY = 0;
12:
13: // 主要區塊大小 (廣告會置於主要區塊之右)
14: var mainBlockWidth = 900;
15:
16: // FloatADRightInitial: 右側浮動廣告初始
17: function FADR_Initial()
18: {
19: // 計算廣告之位置
20: var pageWidth = document.documentElement.clientWidth || document.body.clientWidth;
21:
22: // 計算右側寬度, 若右側寬度大於廣告寬度, 則廣告接在主要區塊之右
23: var edgeRight = (pageWidth - mainBlockWidth) / 2;
24:
25: if (edgeRight > fadrWidth)
26: {
27: fadrInitX = edgeRight + mainBlockWidth;
28: }
29: else
30: {
31: fadrInitX = pageWidth - fadrWidth;
32: }
33:
34: // 設定位置Y
35: fadrInitY = 100;
36: }
37:
38: // FloatAdRightRefresh: 更新視窗位置
39: function FADR_Refresh()
40: {
41: // 預防定義不同之設定
42: var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
43: var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
44:
45: // 計算每次更新之位移
46: fadrX += (fadrInitX + scrollLeft - fadrX) / 5;
47: fadrY += (fadrInitY + scrollTop - fadrY) / 5;
48:
49: // 更新指定圖層之位置
50: var fadrStyle = document.getElementById('divFadR').style;
51: // 須加上'px'
52: fadrStyle.left = fadrX + 'px';
53: fadrStyle.top = fadrY + 'px';
54:
55: // 每次更新時間，預設為50微秒
56: setTimeout('FADR_Refresh()', 50);
57: }
58:
59: // FloatAdRightStart: 啟動
60: function FADR_Start()
61: {
62: FADR_Initial();
63: FADR_Refresh();
64: }
65:
66: FADR_Start();
67: </script>
68:
要移動的圖層html碼如下
1: <div id="divFadR" style="position:absolute;top:100px;left:1000px;visibility:visible;">
2: <table>
3: <tr>
4: <td valign="top">
5: <a href="http://www.zakfong.com/" target="_blank"><img border="0" src="http://www.zakfong.com/test.png" alt="Test" width="100" height="100" vspace="5" /></a>
6: </td>
7: </tr>
8: </table>
9: </div>
10:
好吧，說一下結果，其實這段Code改了又改，終於在Chrome, IE9, Firefox上都可以用了，但是我還是要說，JavaScript真的是讓人很討厭，因為每家瀏覽器對於標準的解讀不同，害我們這些程式設計師，常常搞了半天，都是在處理相容性的問題，而不是Focus在真正需要投入的地方。我應該來發明一套新的瀏覽器標準，不但可以準確地顯示要顯示的文件，還可以用來排版，更重要的是底層的Framework要能很輕易地上手，而且重點是「不用擔心到別的地方，外觀就變調了」。
參考
JavaScript浮動廣告小視窗
頁面內的超酷浮動視窗(可折疊拖動)
VBScript的浮動視窗
隨著捲軸浮動的視窗DIV
浮動廣告視窗
如何取得IE瀏覽器捲軸的捲動距離
document.body.scrollTop都是0
DHTML的onScroll事件
在IE、FF、Chrome下滚动条的onscroll事件
高手请进，那种DIV随滚动条移动怎么弄的，不是用onscroll事件 因为那样会出现抖动
position:fixed的时刻已到来
window.onscroll和document.body.onscroll的区别
[JavaScript] window.onresize 連續觸發的問題
