在網頁及 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 版:
嗯!謝謝!我會再試試看的。
請問一下
_diffY = 20, _diffX = 20, // 距離右及下方邊距
這邊我想改成左上方邊距。怎麼改呢?
參考上面範例中的第四個
謝謝~我有參考過了!!~但是還是不知道怎麼往"左"上角
_diffY = 800, _diffX = 800, // 距離右及下方邊距
把這個數值變大,使用者螢幕大小不一 樣就會跑掉。
左上...那就參考第五個範例吧...
男哥~~
謝啦...
有辦法讓 ie 支援圓角.. 不過只支援 IE7 以上...
可以參考我的網站首頁 http://www.caramel-inc.com 除了圖片之外圓角都是 jq 效果.. 可是!內頁我好像有衝到其他函式庫..還在檢查中qq
to vampire
IE7/8圓角的部份只能用jquery來完成
內頁我看過好像都正常
男丁格爾您好
我想請問一下
這個捲軸滾動廣告在IE8.或IE9能夠正常瀏覽嗎
因為我先前有試做了一個在IE7或firefox的瀏覽環境是ok的
但是換到了IE8的環境好像就無法正常顯示耶 ><
你是用我的範例做的嗎..?範例應個是在各瀏覽器都沒問題的, 剛試了 IE 9 也是 ok.
您好~我是用您的範例做的~
是不是用舊版的1.4 js,會沒辦法在IE8以上正常瀏覽呢?
那如果我改成用1.5.2的js呢?
可以的話, 弄個簡單且有問題的範例來讓大家幫你看看問題在那...!
請問~我用png圖檔做成了flash的模式,然後flash設定成透明的,但是使用這個這個效果後,會產品黑色的邊框,我看了一下這黑色的邊框是png檔的透明底,請問怎麼將flash的這問題改善呢??
冒昧請問一下,如果想要讓左有兩邊都有這種卷軸式的區塊,那要怎麼處理呢!!
如果不太會寫的話, 程式 copy 兩次就可以了, 但 id 要記得不要重覆了。