Home » jQuery 應用

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

範例 1
範例 2
沒錯!只要 800 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!

有同學問說能否在訊息跑馬燈中加入上下鈕,預設是往下滾動來看訊息,但若使用者點了往上時則再切回上一個訊息。這樣的跑馬燈讓我想到前幾篇的「仿 Yahoo 滾動式訊息跑馬燈」,只是再多加兩個按鈕來控制就可以了。

既然如此,就來動手把「仿 Yahoo 滾動式訊息跑馬燈」做點加強改造囉。首先就是要在 HTML 中多加那兩顆鈕:

1
2
3
4
5
6
7
8
9
10
11
<body>
	<div id="abgne_marquee">
		<div class="marquee_btn" id="marquee_next_btn"><img src="marquee_next_btn.jpg" /></div>
		<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 class="marquee_btn" id="marquee_prev_btn"><img src="marquee_prev_btn.jpg" /></div>
	</div>
</body>

因為多了兩個左右護法出來,所以得讓我們的訊息主題往旁邊退一點點;同時也得為這兩個鈕來裝扮一下:

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
div#abgne_marquee {
	position: relative;
	overflow: hidden;	/* 超出範圍的部份要隱藏 */
	width: 415px;
	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;
	left: 30px;			/* 往後推個 30px */
}
div#abgne_marquee ul li a {
	display: block;
	overflow: hidden;	/* 超出範圍的部份要隱藏 */
	font-size:12px;
	height: 25px;
	line-height: 25px;
	text-decoration: none;
}
div#abgne_marquee div.marquee_btn {
	position: absolute;
	cursor: pointer;
}
div#abgne_marquee div#marquee_next_btn {
	left: 5px;
}
div#abgne_marquee div#marquee_prev_btn {
	right: 5px;
}

如果沒什麼差錯的話,當完成到這一步時就能看到基本的畫面了:



再來就是把原本的程式做一點改造:

檢視原始碼 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
$(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,
		direction = 0,	// 0 表示往上, 1 表示往下
		_lock = false;
 
	// 先把 $marqueeli 移動到第二組
	$marqueeUl.css('top', $marqueeli.length / 2 * _height);
 
	// 幫左邊 $marqueeli 加上 hover 事件
	// 當滑鼠移入時停止計時器;反之則啟動
	$marqueeli.hover(function(){
		clearTimeout(timer);
	}, function(){
		timer = setTimeout(showad, speed);
	});
 
	// 判斷要往上還是往下
	$('div#abgne_marquee .marquee_btn').click(function(){
		if(_lock) return;
		clearTimeout(timer);
		direction = $(this).attr('id') == 'marquee_next_btn' ? 0 : 1;
		showad();
	});
 
	// 控制跑馬燈上下移動的處理函式
	function showad(){
		_lock = !_lock;
		var _now = $marqueeUl.position().top / _height;
		_now = (direction ? _now - 1 + $marqueeli.length : _now + 1)  % $marqueeli.length;
 
		// $marqueeUl 移動
		$marqueeUl.animate({
			top: _now * _height
		}, scrollSpeed, function(){
			// 如果已經移動到第二組時...則馬上把 top 設回到第一組的最後一筆
			// 藉此產生不間斷的輪播
			if(_now == $marqueeli.length - 1){
				$marqueeUl.css('top', $marqueeli.length / 2 * _height - _height);
			}else if(_now == 0){
				$marqueeUl.css('top', $marqueeli.length / 2 * _height);
			}
			_lock = !_lock;
		});
 
		// 再啟動計時器
		timer = setTimeout(showad, speed);
	}
 
	// 啟動計時器
	timer = setTimeout(showad, speed);
 
	$('a').focus(function(){
		this.blur();
	});
});

基本的程式架構並沒有什麼改變,只是一開始並不確定使用者會不會往上來看訊息,所以筆者就利用程式先把訊息移動到第二組

檢視原始碼 JavaScript
1
2
// 先把 $marqueeli 移動到第二組
$marqueeUl.css('top', $marqueeli.length / 2 * _height);

接著再透過變數 direction 來決定是要往上還是往下來滾動訊息跑馬燈。

檢視原始碼 JavaScript
1
2
var _now = $marqueeUl.position().top / _height;
_now = (direction ? _now - 1 + $marqueeli.length : _now + 1)  % $marqueeli.length;

如果沒問題的話,現在的訊息跑馬燈預設就會往上跑,同時也能透過按鈕來決定跑馬燈的方向囉。

範例 1 範例 2 範例 3

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

Ext JS 版:

範例 1 範例 2

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

    • 如果已經會 JavaScript 的話,那就直接學 jQuery 就好,否則建議先學會 JavaScript 基礎後再往上學習。

  1. 我想將期改成無縫,並且多行一起顯示的效果,您可以協助嗎?
    目前只能做到多行,沒辦法作到無縫,請幫忙,謝謝!!

  2. 向上可以循環,向下就不行了!
    找不到哪裡有改,效果就出來了,真神!!
    可以用循環把跳回第一行的步驟改掉嗎,這樣子是不是比較順!!
    謝謝囉!

  3. 如果是多行的就會有小瑕疵,可以指導要怎麼改嗎?
    //css 修改的部份

    div#abgne {
    overflow: hidden; /* 超出範圍的部份要隱藏 */
    width: 430px;
    height: 100px;
    border: 1px solid #ccc;
    }
    div#abgne_marquee {
    position: relative;
    overflow: visible; /* 全部顯示 */
    width: 430px;
    height: 25px;
    /*border: 1px solid #ccc;*/
    }

    //html的部份:

    【開課快訊】04/11 JavaScript & CSS 互動程式入門班 (週日班)1
    【開課快訊】05/09 Photoshop 影像達人專修班 (週日班)1
    【調查】你的獎品你來決定 - 活動獎品大調查1
    【開課快訊】04/11 JavaScript & CSS 互動程式入門班 (週日班)2
    【開課快訊】05/09 Photoshop 影像達人專修班 (週日班)2
    【調查】你的獎品你來決定 - 活動獎品大調查2

發表迴響