在網頁及 JavaScript 剛發展的時期,常常看到網頁中都飄浮的五顏六色的廣告圖片。其實這有幾種做法,像是毫無目的的飄來飄去,或是者跟著捲軸滾到那就飄到那。現在還能在大陸的一些網站中看到這樣的內容。
筆者這邊就針對網頁捲軸滾動的方式來做介紹:
檢視原始碼 HTML
1 2 3 4 5 6 7 8 9 | <body> <div class="bigDiv">我是一個很長的區塊</div> <div id="abgne_float_ad" > <a href="http://www.flycan.com.tw/course/course_javascript.php"> <img src="course_javascript.gif" title="JavaScript & CSS 互動程式入門班" /> </a> </div> </body> |
為了模擬出很長很的的網頁,因此筆者就把 div.bigDiv 的高度設的很大:
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 | #abgne_float_ad { display: none; position: absolute; } #abgne_float_ad img { border: none; } div.bigDiv { height: 3000px; } |
既然廣告要能浮動的話,它的 position 就得要設成 absolute 才能比較方便。接著筆者再針對網頁捲軸的時的 scroll 及視窗大小改變時的 resize 事件中來控制廣告圖片的位置:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | // 當網頁載入完 $(window).load(function(){ var $win = $(window), $ad = $('#abgne_float_ad').css('opacity', 0).show(), // 讓廣告區塊變透明且顯示出來 _width = $ad.width(), _height = $ad.height(), _diffY = 20, _diffX = 20, // 距離右及下方邊距 _moveSpeed = 800; // 移動的速度 // 先把 #abgne_float_ad 移動到定點 $ad.css({ top: $(document).height(), left: $win.width() - _width - _diffX, opacity: 1 }); // 幫網頁加上 scroll 及 resize 事件 $win.bind('scroll resize', function(){ var $this = $(this); // 控制 #abgne_float_ad 的移動 $ad.stop().animate({ top: $this.scrollTop() + $this.height() - _height - _diffY, left: $this.scrollLeft() + $this.width() - _width - _diffX }, _moveSpeed); }).scroll(); // 觸發一次 scroll() }); |
為了避免廣告圖片太大還沒載完時會取不到寬高,因此筆者這邊是把整個動作延遲到當網頁都載入完時才開始動作。且如果不使用 animate() 來變更位置的話,整個廣告移動會變的很彆扭的唷。若沒問題的話~只要簡單的語法就能做出一個跟屁蟲的廣告囉:
各位也能在瀏覽時試著去縮放瀏覽器的視窗大小,相信各位會看到浮動廣告的變化的。
另外我們也能在廣告旁邊加上個可以控制廣告關閉的鈕,讓使用者可以選擇要不要看到這跟屁蟲廣告。先在 #abgne_float_ad 中加入關閉的項目:
檢視原始碼 HTML
1 2 3 4 5 6 7 8 9 10 | <body> <div class="bigDiv">我是一個很長的區塊</div> <div id="abgne_float_ad" > <span class="abgne_close_ad">關閉廣告 [X]</span> <a href="http://www.flycan.com.tw/course/course_javascript.php"> <img src="course_javascript.gif" title="JavaScript & CSS 互動程式入門班" /> </a> </div> </body> |
接著用 CSS 稍微設定樣式:
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | #abgne_float_ad { display: none; position: absolute; } #abgne_float_ad .abgne_close_ad { display: block; text-align: right; cursor: pointer; font-size: 12px; } #abgne_float_ad a img { border: none; } div.bigDiv { height: 3000px; } |
再來就是當按下關閉鈕時,只要把整個廣告區塊隱藏起來就可以囉:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | // 當網頁載入完 $(window).load(function(){ var $win = $(window), $ad = $('#abgne_float_ad').css('opacity', 0).show(), // 讓廣告區塊變透明且顯示出來 _width = $ad.width(), _height = $ad.height(), _diffY = 20, _diffX = 20, // 距離右及下方邊距 _moveSpeed = 800; // 移動的速度 // 先把 #abgne_float_ad 移動到定點 $ad.css({ top: $(document).height(), left: $win.width() - _width - _diffX, opacity: 1 }); // 幫網頁加上 scroll 及 resize 事件 $win.bind('scroll resize', function(){ var $this = $(this); // 控制 #abgne_float_ad 的移動 $ad.stop().animate({ top: $this.scrollTop() + $this.height() - _height - _diffY, left: $this.scrollLeft() + $this.width() - _width - _diffX }, _moveSpeed); }).scroll(); // 觸發一次 scroll() // 關閉廣告 $('#abgne_float_ad .abgne_close_ad').click(function(){ $ad.hide(); }); }); |
多了那個鈕就能讓使用者自行決定看不看浮動廣告囉!啥~要記錄使用者的選擇來決定下次進來要不要顯示廣告?這就要請各位試著用 Cookie 來實做囉。
Ext JS 版:
請問要如何才會像右邊的google +1一樣
靠齊網站寬度
不管任何縮放位置都不會跑掉?
這是要看你的區塊位置在那, 現在網站右邊那個我只有控制 top 移動而已
瞭解了
所以不是javascript去控制他的X軸
感謝~
你好:
如上eRic的問題…
我怎麼調不好呢? 語法裡不用把對齊的刪掉嗎?
對齊?你的語法是寫什麼呢?
是用上面的語法的!!!
但不懂上面說的要改哪裡才能像本頁面google那樣~
固定在左邊。
建議你可以參考我 blog 的 css, 我只是把它的 margin-left 設成固定的 990px;
男丁大大
以上範例我試過沒有任何問題,但是我把它放入一個iframe裡面
他就沒有動的效果,該如何改呢??
要看到你的範例檔案才知道你的問題是在那邊~
請問一下,
關於您網站中,右側的那個是如何製作的???
就是浮動廣告的效果而已, 只是我讓它固定位置在那邊, 然後只改變上下
男丁大大
那個載點掛了~~不知可不可以補載點@@
謝謝
最近的免空真的是死的死, 跑的跑XD
載點已更新了~
可以請問這個如果寫入wordpress 要從那的檔修改呢?
謝謝
可以把廣告 HTML 語法放在網頁的最後面, 至於 js 的話, 也可以寫在廣告 HTML 語法的後面。
不好意思請問一下,我想做一個像範例三一樣平常停留在下方的廣告
但是當網頁捲動至底部時該廣告會往上移動停留在距離底部200px高的地方
請問應該要怎麼修改呢?
你得要依整個網頁的高及你的廣告的高來做捲軸高度的判斷。
您好,我想付費請貴團隊協助我將這個效果做些修改,但是上方的申請聯結已經失效,請問是否有非公開方式可與您聯繫討論,謝謝!
已回信給您了。至於該申請功能會在近日內修復。
您新增的"到底部時停在底部區塊上方"功能很實用,非常感謝您的大力協助!
不好意思又來麻煩您,我有發現一個問題,就是這支程式好像會導致跳頁anchor連結無法動作。
舉例假設有網頁a.html與b.html,我在a.html設一超連結,原本應該會跳轉並定位至b.html裡id="123"的位置,現在只會跳至b.html但沒辦法自動定位,請問該如何解決這個問題?謝謝~~
沒看到範例不知道問題確切出現在那..!
不過你試著把
這拿掉試看看
男丁大 我將他套用在-//W3C//DTD XHTML 1.0 Transitional 的版本上 好像無法順利進行,有沒有修改的方向呢?
我試是還算正常耶, 有辦法弄個簡單且有問題的範例讓我試試嗎?
謝謝男丁大 也許是我搞錯了 我再試試
謝謝男丁大 我已經成功置入摟 謝謝您