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: else30: {31: fadrInitX = pageWidth - fadrWidth;32: }33:34: // 設定位置Y35: 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要能很輕易地上手,而且重點是「不用擔心到別的地方,外觀就變調了」。
參考
高手请进,那种DIV随滚动条移动怎么弄的,不是用onscroll事件 因为那样会出现抖动
沒有留言:
張貼留言