在網頁及 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 版:
那要怎麼設連結讓他可以關閉?
文章的內容都已修改過了,麻煩快速的重新檢視一次。
謝^^
那個....男丁~~我想請教你一個問題:
就是我看過一個網站(忘了在哪裡)
裡面的首頁是簡易型的,
就是有三個圖示,
滑鼠滑過去會放大,
有一點像開心水族箱底下選擇用具的那種效果,
移到上面會變大,然後可以連結到別的網頁的~~
請問那個東東有語法嗎?
你說的是像 Mac 的選單嗎?
如果是的話..jQuery 也有類似的外掛:http://www.wizzud.com/jqDock/
摁摁~
不過....
有教學文章嗎??
我還是新手...可以麻煩指導一下嗎:)
我在看一下這外掛要怎樣用..
不過通常弄成外掛後..使用都是很簡單的
摁~~謝謝:DD
哇!真的是超強達人
可以請問一個問題嗎?一直在網路上找找不到答案
http://thatsthewayitisblog.blogspot.com/
這網頁的繼續閱讀請問是怎麼寫出來的,可以解答我的疑惑嗎?
很像貴站右邊好格輪播下面的「顯示全部」或「顯示五個選項」
⋯⋯
可以不跳主頁面,在當頁內直接滑動
我看了dreamweaver的書有這功能的示範但卻不知道怎寫到blogger裡。
PS:我去看jQuery的網站也看不懂耶,不知怎下載來放在blogger使用
它其實是把文章全部都顯示出來, 然後透過 JavaScript 來把其它的先隱藏起來
當點下去時才把隱藏的部份展開而已
它使用的外掛來源是 http://code.google.com/p/cjh829-easy-read-more/
請問男兄,你有較好的IE圓角方法嗎?
不使用圖片與VML,謝謝!
那...可以等 IE 9 支援 border-radius。
常見的還有一種是用很多的區塊來慢慢組成圓角。
嗯,身為網設師,要考慮到使用者不一定都是使用IE9,也不能說強迫使用者升級什麼的,這往往易造成使用者反感。
小弟之前嘗試過使用區塊組成圓角,但缺點是有鋸齒狀,不夠圓滑,而且需要好幾行程式碼才可達成。
我想應該沒有其他方法了吧!不支援border-radius真是U-IE8的特色,IE9既然要支援border-radius,乾脆一起取消對VBSCRIPT的支援,畢竟VBSCRIPT不是什麼好東西,對使用者而言,呵呵!
呵..小站當然是不能強破使用者升級..
不過有時為了一直牽就 IE 6...這樣就變成包袱了..。
你好!想請問一下,已按照上面的步驟完成後圖片卻不會跑出來,想請問是哪邊出了問題呢? .....不好意思!我還是新手...
要看你的網頁才能判斷問題是出在那。
也許圖片的位置太高或太低了。
你好!我放在訊6上 http://www.xun6.com/file/497503525/%E6%B5%AE%E5%8B%95%E5%BB%A3%E5%91%8A.html.html 麻煩幫我看一下了,謝謝!
這些效果都是用 jQuery 來寫的,因此你得先引用 jQuery.js 才行喔。