Home » jQuery 應用

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

[ 日期： | 瀏覽：47,898 | 迴響：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

  1. 這個應用真的很棒！另外想請問一下，facebook不用刷新頁面，就可以在左下角淡出淡入朋友動作，是用什麼程式或方法辦到的啊？哪裡有相關的教學嗎？謝謝。

  3. 男丁大大您好：

    可以請教..當滑鼠移至訊息，訊息會停止，滑鼠移開後，訊息會在自動輪播。
    我試過無數次了..也按照您所說的範例修改，但還是不行..我是新手，想把效果呈現在我新的網頁上，可以幫我修改嗎....謝謝您的幫忙

  4. 男丁大大您好：

    // 當滑鼠移入時停止計時器；反之則啟動

    $news.hover(function(){

    clearTimeout(timer);

    }, function(){

    timer = setTimeout(newsScroll, speed);

    });

    反覆參考您的範例，不斷的測試..終於完成了..

  6. 請問老師
    我再輪播的某個項目的連結 加入lightbox的效果
    第一次出現時正常
    可是等到輪播第二回再出現同一個連結 lightbox就失效了
    好像是輪播不會複製呼叫lightbox的語法
    要怎麼處理呢?

    • 就把 .prependTo() 改成 .appendTo(), 然後原本是加入新元素時都改變 top, 也許現在就要換成讓 bottom 都歸 0
      改天我再來做一個看看~

    • 檢視原始碼 JavaScript
      1
2
3
4
5
6
7
8
9
10
11
12

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

      ...上個月才開始學 jQuery 語法並套用到自己申請的免空 ...多謝老師網路上的教學 ... 有改了由下往上的在我的免空試過是 ok 的~

  8. 請問老師~ajax動態資料抓回來後只會一直顯示第一筆資料 不會有輪播的效果??
    請問是哪裡出了問題~我是用老師的範例下去修改的!

  10. 男丁大大您好：
    照你的程式,只有顯示4筆資料，沒有出現跑馬燈效果,請問是那裡有問題嗎?

    無標題文件

    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;

    $(function(){
    var $news = $('.abgne-news-scroll ul'),
    fadeInSpeed = 1000,
    timer, speed = 3000;

    function newsScroll(){
    var $last = $news.find('li:last');
    $last.clone().hide().prependTo($news).fadeIn(fadeInSpeed, function(){
    timer = setTimeout(newsScroll, speed);
    });
    $last.remove();
    }

    timer = setTimeout(newsScroll, speed);

    });

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

1 2

發表迴響