Home » jQuery 應用

[jQ]用 jQuery 做跑馬燈 – 仿 Twitter 的附加式訊息跑馬燈

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

如果有在使用 Twitter 的網友應該會看到它們官網上的 Top Tweets 是會一直有新的訊息加到第一筆。



當然它能是利用 Ajax 的方式來取得最新的訊息並加到第一筆，不過也有可能是固定的幾則訊息在那邊像摩天輪一樣的轉啊轉的。但這並不是此次筆者要跟各位討論的話題，最重要的是如何實現像 Twitter 一樣的訊息附加的跑馬燈效果。

筆者這邊就用固定幾則訊息的方式來實做，首先準備好 HTML 內容：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<body>
	<div class="abgne-news-scroll">
		<ul>
			<li>圖書管理系統 - 預算約 20 萬元</li>
			<li>WordPress 投票系統 - 預算 3 萬元</li>
			<li>Joomla 網站設計整合 - 預算 4 萬元</li>
			<li>網頁文案 - 請報價</li>
			<li>Flash 按鈕 - 預算 2 千元</li>
			<li>Facebook 程式設計開發專案 - 預算 8 萬元</li>
			<li>WordPress 佈景外包 - 請報價</li>
			<li>部落格模板風格設計專案 - 請報價</li>
			<li>網站前後端程式設計專案 - 請報價</li>
			<li>學生專題-資料庫整合外包 - 預算 5 千以內</li>
		</ul>
	</div>
</body>

接著稍微排一下版面：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.abgne-news-scroll {
	border: 1px solid #f39;
	width: 320px;
	height: 120px;
	overflow: hidden;
	position: relative;
}
.abgne-news-scroll li {
	background: url(arr.jpg) no-repeat 5px 10px;
	padding: 5px 0 5px 19px;
}

本來有 10 則訊息，但透過 CSS 來排版後就只能看到 4 則了。



其它看不到的訊息就是要利用程式來把它們一一附加到第一筆來顯示：

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

$(function(){
	// 先取得 .abgne-news-scroll ul, 並設定淡入及輪播時間
	var $news = $('.abgne-news-scroll ul'), 
		fadeInSpeed = 1000, 
		timer, speed = 3000;
 
	// 用來控制輪播用
	function newsScroll(){
		// 先找出最後一個 li
		var $last = $news.find('li:last');
		// 複製一份並先隱藏起來
		// 接著把它加到 .abgne-news-scroll ul 中的第一個項目
		// 最後用淡入的方式顯示, 當顯示完後繼續輪播
		$last.clone().hide().prependTo($news).fadeIn(fadeInSpeed, function(){
			timer = setTimeout(newsScroll, speed);
		});
		// 把 $last 移除掉
		$last.remove();
	}
 
	// 啟動輪播計時器
	timer = setTimeout(newsScroll, speed);
});

完成後就能看到會自動不斷的把最後一筆附加到第一筆的跑馬燈效果了：



不知道有沒有人注意到訊息是突然就跳插進去的，感覺有點不是那麼滑順。這是因為新的訊息項目會把整個 ul 往下擠，且被附加的項目一開始又是隱藏的，所以才會看到突然跳插的畫面。

所以筆者再稍微修改一下 CSS：

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

.abgne-news-scroll ul {
	position: absolute;
}
.abgne-news-scroll li {
	background: url(arr.jpg) no-repeat 5px 10px;
	height: 20px;
	padding: 5px 0 5px 19px;
}

接著針對 .abgne-news-scroll ul 的移動做點手腳：

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

$(function(){
	// 先取得 .abgne-news-scroll ul 及 li 的高度
	// 並設定訊息移動, 淡入及輪播時間
	var $news = $('.abgne-news-scroll ul'), 
		scrollHeight = $news.find('li').outerHeight(true), 
		scrollSpeed = 600, fadeInSpeed = 600, 
		timer, speed = 3000;
 
	// 用來控制輪播用
	function newsScroll(){
		// 先把 .abgne-news-scroll ul 往下移
		$news.animate({
			top: scrollHeight + 'px'
		}, scrollSpeed, function(){
			// 當 .abgne-news-scroll ul 移動到定點後
			// 先找出最後一個 li
			var $last = $news.find('li:last');
			// 複製一份並先隱藏起來
			// 接著把它加到 .abgne-news-scroll ul 中的第一個項目
			// 最後用淡入的方式顯示, 當顯示完後繼續輪播
			$last.clone().hide().prependTo($news).fadeIn(fadeInSpeed, function(){
				timer = setTimeout(newsScroll, speed);
			});
			// 馬上把 .abgne-news-scroll ul 移到 top 等於 0 的位置
			$news.css('top', 0);
			// 把 $last 移除掉
			$last.remove();
		});
	}
 
	// 啟動輪播計時器
	timer = setTimeout(newsScroll, speed);
});

這邊最重要的步驟是再附加新的項目前，先透過動畫的方式來把 .abgne-news-scroll ul 往下移動，並在附加新的項目後快速的把它在移回 top 等於 0 的位置。整個動作串起來就能做出仿真度達 99% 的效果囉。

這是筆者把整個訊息區塊改變後的效果：

範例 1 範例 2 範例 3

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

38 筆針對 [jQ]用 jQuery 做跑馬燈 – 仿 Twitter 的附加式訊息跑馬燈 的迴響

1 2

  3. 你好，因不知如何聯繫，故在此留言，我們是威祺有限公司，目前計畫建置內銷購物平台，不知是否有接此類案子，若有任何打擾之處，敬請見諒，也可把此留言刪除，謝謝。

  5. 男丁老師
    我把這個丟到表格裡,但是..訊息跑掉了,整個被切一半,左半邊一片空白!!
    請問該怎麼修改呢?
    3Q

    • 你這樣發問..我怎麼會知道你的畫面及版面是長怎樣呢XD
      好歹也把有問題的網頁弄成一個範例丟上來給大家瞧瞧, 或是直接到討論區去發問及張貼程式碼內容

  9. 真的很不好意思，我參考您的左右不間斷的商品展示輪播，
    測試了幾次還是用不出來，煩請指點迷津～感恩！

1 2

發表迴響