Home » jQuery 應用

[jQ]用 jQuery 做廣告 – 網頁捲軸滾動式廣告

[ 日期： | 瀏覽：95,631 | 迴響：70 ]
範例 1
範例 2
範例 3
請協助我把這個效果加到我的網站 (只要 600 元)
沒錯!只要 600 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

在網頁及 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 來實做囉。

範例 1 範例 2 範例 3 範例 4 範例 5

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定
到底部時停在底部區塊上方 會員限定

Ext JS 版：

範例 1 範例 2 範例 4

70 筆針對 [jQ]用 jQuery 做廣告 – 網頁捲軸滾動式廣告 的迴響

1 2 3 4

  3. 那個....男丁~~我想請教你一個問題:

    就是我看過一個網站(忘了在哪裡)
    裡面的首頁是簡易型的,
    就是有三個圖示,
    滑鼠滑過去會放大,
    有一點像開心水族箱底下選擇用具的那種效果,
    移到上面會變大,然後可以連結到別的網頁的~~

    請問那個東東有語法嗎?

  6. 哇！真的是超強達人
    可以請問一個問題嗎？一直在網路上找找不到答案
    http://thatsthewayitisblog.blogspot.com/
    這網頁的繼續閱讀請問是怎麼寫出來的，可以解答我的疑惑嗎？
    很像貴站右邊好格輪播下面的「顯示全部」或「顯示五個選項」
    ⋯⋯
    可以不跳主頁面，在當頁內直接滑動
    我看了dreamweaver的書有這功能的示範但卻不知道怎寫到blogger裡。

    PS：我去看jQuery的網站也看不懂耶，不知怎下載來放在blogger使用

  8. 嗯，身為網設師，要考慮到使用者不一定都是使用IE9，也不能說強迫使用者升級什麼的，這往往易造成使用者反感。
    小弟之前嘗試過使用區塊組成圓角，但缺點是有鋸齒狀，不夠圓滑，而且需要好幾行程式碼才可達成。
    我想應該沒有其他方法了吧！不支援border-radius真是U-IE8的特色，IE9既然要支援border-radius，乾脆一起取消對VBSCRIPT的支援，畢竟VBSCRIPT不是什麼好東西，對使用者而言，呵呵！

  9. 你好!想請問一下，已按照上面的步驟完成後圖片卻不會跑出來，想請問是哪邊出了問題呢? .....不好意思!我還是新手...

1 2 3 4

發表迴響