Home » jQuery 應用

[jQ]用 jQuery 做跑馬燈 – 仿 Yahoo 滾動式訊息跑馬燈

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

廣告的效果就是要讓消費者購買，當然第一步就是要先能吸引人看廣告。如果各位有進入到Yahoo!奇摩首頁的話，可能很多人多少都會被那用詞超誇張的訊息跑馬燈所引誘並點擊廣告



雖然它只是一般的訊息跑馬燈的效果，但運用了標題式的圖示及嚇死人不償命的文字內容，就讓瀏覽者有不一樣的感受。這次筆者就來教各位如何用 jQuery 來做一個類似的跑馬燈。

首先當然是要有廣告的項目內容：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9

<body>
	<div id="abgne_marquee">
		<ul>
			<li><a href="http://www.flycan.com.tw/course/course_javascript.php">【開課快訊】04/11 JavaScript ＆ CSS 互動程式入門班 (週日班)</a></li>
			<li><a href="http://www.flycan.com.tw/course/course_photopro.php">【開課快訊】05/09 Photoshop 影像達人專修班 (週日班)</a></li>
			<li><a href="http://abgne.tw/site-proclamation/questionnaire-1.html">【調查】你的獎品你來決定 - 活動獎品大調查</a></li>
		</ul>
	</div>
</body>

接著再用 CSS 來裝飾它，並讓畫面只能看到一筆的內容：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

div#abgne_marquee {
	position: relative;
	overflow: hidden;	/* 超出範圍的部份要隱藏 */
	width: 375px;
	height: 25px;
	border: 1px solid #ccc;
}
div#abgne_marquee ul, div#abgne_marquee li {
	margin: 0;
	padding: 0;
	list-style: none;
}
div#abgne_marquee ul {
	position: absolute;
}
div#abgne_marquee ul li a {
	display: block;
	overflow: hidden;	/* 超出範圍的部份要隱藏 */
	font-size:12px;
	height: 25px;
	line-height: 25px;
	text-decoration: none;
}

其實這邊用到的 CSS 都是很常見的用法，當設計完後就能看到雛型了



接下來比較要注意的是程式處理的部份：

檢視原始碼 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

$(function(){
	// 先取得 div#abgne_marquee ul
	// 接著把 ul 中的 li 項目再重覆加入 ul 中(等於有兩組內容)
	// 再來取得 div#abgne_marquee 的高來決定每次跑馬燈移動的距離
	// 設定跑馬燈移動的速度及輪播的速度
	var $marqueeUl = $('div#abgne_marquee ul'),
		$marqueeli = $marqueeUl.append($marqueeUl.html()).children(),
		_height = $('div#abgne_marquee').height() * -1,
		scrollSpeed = 600,
		timer,
		speed = 3000 + scrollSpeed;
 
	// 幫左邊 $marqueeli 加上 hover 事件
	// 當滑鼠移入時停止計時器；反之則啟動
	$marqueeli.hover(function(){
		clearTimeout(timer);
	}, function(){
		timer = setTimeout(showad, speed);
	});
 
	// 控制跑馬燈移動的處理函式
	function showad(){
		var _now = $marqueeUl.position().top / _height;
		_now = (_now + 1) % $marqueeli.length;
 
		// $marqueeUl 移動
		$marqueeUl.animate({
			top: _now * _height
		}, scrollSpeed, function(){
			// 如果已經移動到第二組時...則馬上把 top 設 0 來回到第一組
			// 藉此產生不間斷的輪播
			if(_now == $marqueeli.length / 2){
				$marqueeUl.css('top', 0);
			}
		});
 
		// 再啟動計時器
		timer = setTimeout(showad, speed);
	}
 
	// 啟動計時器
	timer = setTimeout(showad, speed);
 
	$('a').focus(function(){
		this.blur();
	});
});

因為要做到訊息跑馬燈能不間斷的輪播，所以筆者就把原來的廣告項目再完整的複製了一份並加入，這樣當訊息顯示到第二組的第一筆時，我們就能用迅雷不及掩耳的速度再把它移到第一組的第一筆，讓瀏覽者產生一種不間斷輪播的 Magic 效果。

現在做的是往上滾動的跑馬燈，若是要往下滾動的話，只要稍微修改一下程式：

檢視原始碼 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

$(function(){
	// 先取得 div#abgne_marquee ul
	// 接著把 ul 中的 li 項目再重覆加入 ul 中(等於有兩組內容)
	// 再來取得 div#abgne_marquee 的高來決定每次跑馬燈移動的距離
	// 設定跑馬燈移動的速度及輪播的速度
	var $marqueeUl = $('div#abgne_marquee ul'),
		$marqueeli = $marqueeUl.append($marqueeUl.html()).children(),
		_height = $('div#abgne_marquee').height() * -1,
		scrollSpeed = 600,
		timer,
		speed = 3000 + scrollSpeed;
 
	// 把 $marqueeUl 的 top 設為顯示到第二組內容的第一筆
	$marqueeUl.css('top', $marqueeli.length / 2 * _height);
 
	// 幫左邊 $marqueeli 加上 hover 事件
	// 當滑鼠移入時停止計時器；反之則啟動
	$marqueeli.hover(function(){
		clearTimeout(timer);
	}, function(){
		timer = setTimeout(showad, speed);
	});
 
	// 控制跑馬燈移動的處理函式
	function showad(){
		var _now = $marqueeUl.position().top / _height;
		_now = (_now - 1 + $marqueeli.length) % $marqueeli.length;
 
		// $marqueeUl 移動
		$marqueeUl.animate({
			top: _now * _height
		}, scrollSpeed, function(){
			// 如果已經移動到第一組時...則馬上把 top 設為顯示到第二組內容的第一筆
			// 藉此產生不間斷的輪播
			if(_now == 0){
				$marqueeUl.css('top', $marqueeli.length / 2 * _height);
			}
		});
 
		// 再啟動計時器
		timer = setTimeout(showad, speed);
	}
 
	// 啟動計時器
	timer = setTimeout(showad, speed);
 
	$('a').focus(function(){
		this.blur();
	});
});

當然筆者只是用較為簡單的方式來當範例，如果再加上一點點設計就能變成帶有圖示的訊息跑馬燈：



相信依各位的設計能力來做的話，效果是不會輸給 Yahoo!奇摩的啦！

範例 1 範例 2 範例 3

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

Ext JS 版：

範例 1 範例 2 範例 3

也許您對這些文章也有興趣

  • [jQ]用 jQuery 做跑馬燈 – 仿 Yahoo 滾動式訊息跑馬燈加強版
  • [jQ]用 jQuery 做廣告 – 仿 Yahoo 切換式 N 格圖片廣告
  • [jQ]仿 Yahoo 滑出式說明描述
  • [jQ]用 jQuery 做跑馬燈 – 仿 Twitter 的附加式訊息跑馬燈
  • [jQ]用 jQuery 做廣告 – 仿 Yahoo 切換式兩格圖片廣告
  • [jQ]用 jQuery 做廣告 – 仿 Yahoo 標籤式垂直廣告輪播

26 筆針對 [jQ]用 jQuery 做跑馬燈 – 仿 Yahoo 滾動式訊息跑馬燈 的迴響

1 2

  1. 男丁你好,
    我想請教你一個問題：
    就是在你網頁的最下面有一個"Page Top"的按鈕,
    按一下會跑到最上層而且有一種動畫效果,
    請問要用什麼弄的呢??
    可以給我語法嗎???

    回覆 ↓

  3. 想請問一下,你的檢視原始檔的那塊是怎麼做的？？
    就是按下去,就把內文縮了,順便問一下,可以用成是圖片的嗎？？
    就是內容是圖片的︿︿

    回覆 ↓

  7. 男丁您好：
    　請問一下：你的程式抓下來後是沒有圖的。文字左邊的圖（超激、破盤、HOT）該怎麼放入，我放入的「圖」自己也變成一組內容了，該怎麼放才可以像你的一樣呢？

    回覆 ↓

    • 我是用背景圖片來當文字左邊的圖的..
      仔細看看 css 裡面的 background-image

      回覆 ↓

  8. 請問一下~
    套用在php上傳網頁後會出現這樣的訊息————————
    訊息: '$marqueeUl.position().top' 是 null 或不是一個物件
    行: 54
    字元: 4
    程式碼: 0
    URI: ***
    ———————————————————
    請問一下這是怎麼回事呢

    回覆 ↓

    • (Y)....解決了就好..
      下次記得把你的 HTML 原始碼傳上來或是寄來看..
      不然只能從錯誤訊息找個大概問題而已..

      回覆 ↓

  10. 男丁老師，想請教一下，
    再測試此範例的時候，試著吧 div#abgne_marquee 的邊框拿掉
    結果發現@@ 跑了幾輪之後，位置會跑掉 >"<
    也有試著改跑的 _height 資料，可是只要多跑幾輪，還是會錯
    如果沒有邊框要怎樣修改咧??

    回覆 ↓
1 2

發表迴響

您的電子郵件位址並不會被公開。 必要欄位標記為 *

*

您可以使用這些 HTML 標籤與屬性： <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>