Home » jQuery 應用

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

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

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

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

檢視原始碼 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>

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

檢視原始碼 CSS
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 滾動式訊息跑馬燈加強版 的迴響

1 2 3

  1. 男丁老師:
    謝謝分享這麼清楚方便的範例
    有個問題想請問，
    跑馬燈是一個區塊顯示，每次顯示不只一筆
    是把html語法跟資料於後端產生塞進label裡
    但兩組li輪完後，後面就會接著空白
    有辦法讓他一直輪撥嗎?
    謝謝~

      • 男丁老師:
        會的，如設定一開始移到第二組就從空白開始輪撥，
        從第一組開始就是輪完兩組就空白
        因為資料不固定也不只顯示一筆跑馬燈
        其他人都沒遇到嗎@@
        謝謝

        以下是資料產生的語法
        div 高度設為100
        Label1.Text = "";

        for (int i = 0; i = 30)
        {
        strNEWS = dt.Rows[i]["NEWS"].ToString().Substring(0, 30)+"...";
        }
        else
        { strNEWS = dt.Rows[i]["NEWS"].ToString(); }
        Label1.Text += "" + strNEWS + "";
        }
        Label1.Text += ""
        + "";

        • 直接試我第二個範例並不套你的產生資料的部份也會這樣?
          這要看到你的範例檔案才知道問題哩, 先用瀏覽器瀏覽你的網頁, 然後利用檢視原始碼的方式把 html 寄來看看
          可以的話連同css, js

          • 男丁老師，已將檔案寄到wordpress(抱歉，不確定是不是寄這個，但只找到這個mail)

            以第二個範例來看
            似乎只要div高度變高就會有空白產生

            謝謝

          • 唔..那你應該寄錯地方了, 我的mail是 網址@gmail.com(網址含.tw)

  2. 您好，不好意思我想請問一下 我把這項功能使用在左欄的區塊，一切都OK，但是當我再加上footer區塊時，他會全部內容都跑出來，並且轉換的速度整個改變，請問是什麼原因呢@@? 之後將您的範例整個貼到我的網站上也是一樣的情形，只要加入footer區塊就會變形

1 2 3

發表迴響