男丁格爾's 脫殼玩

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

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

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

檢視原始碼 HTML

<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

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

$(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

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

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

1 2 下一頁 »

AKOU 於 2010-07-02 00:26:33 說：

請問要向您學習更多實際的應用特效
要上js＆css那一班，還是jquery那一班呢？
謝謝

回覆 ↓
- 男丁格爾於 2010-07-02 08:54:32 說：
  
  如果已經會 JavaScript 的話，那就直接學 jQuery 就好，否則建議先學會 JavaScript 基礎後再往上學習。
  
  回覆 ↓
vcrvcr 於 2010-07-02 14:30:40 說：

想請教板大首頁上面的最新消息要如何做呢

回覆 ↓
- 男丁格爾於 2010-07-02 19:55:35 說：
  
  那只是把訊息一個字一個字秀出而已...有時間的話會再弄成教學文章。
  
  回覆 ↓
Azan 於 2010-07-21 23:13:22 說：

不知男丁大可否在網站內加上搜尋功能，方便找資料時快一些，
因為男大網站的資料越來多了，
感謝。

回覆 ↓
- 男丁格爾於 2010-07-22 14:16:12 說：
  
  先套一個 Google Search 的試看看..
  目前比較沒時間去調整它XD
  
  回覆 ↓
robbie 於 2010-08-23 21:13:42 說：

帅`收藏了

回覆 ↓
robbie 於 2010-08-23 21:15:19 說：

你那(最新消息) 有教程吗?

回覆 ↓
- 男丁格爾於 2010-08-23 21:24:07 說：
  
  只有簡單版的範例而已..因為這樣的效果得有其它 html 配合
  
  回覆 ↓
keyjus 於 2010-08-26 13:57:10 說：

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

回覆 ↓
- 男丁格爾於 2010-08-26 14:04:29 說：
  
  所謂的無縫是指什麼..?不間斷的循環嗎?
  
  回覆 ↓
keyjus 於 2010-08-26 16:02:06 說：

對阿！！就是不間斷的循環。
請問要改哪裡！！

回覆 ↓
- 男丁格爾於 2010-08-26 16:21:43 說：
  
  循環的 bug 已經修正..你再試試上面的範例
  
  回覆 ↓
keyjus 於 2010-08-26 17:26:40 說：

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

回覆 ↓
- 男丁格爾於 2010-08-27 16:26:40 說：
  
  我試是可以上下循環哩...你試我的可以嗎?
  
  回覆 ↓
keyjus 於 2010-09-08 10:13:08 說：

如果是多行的就會有小瑕疵，可以指導要怎麼改嗎？
//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

回覆 ↓
- 男丁格爾於 2010-09-09 09:18:45 說：
  
  唔....那來的 #abgne 咧...?
  方便的話就到討論區發文並把範例檔案上傳
  
  回覆 ↓
keyjus 於 2010-09-08 16:42:19 說：

單行測試ok，多行就沒轍了，
js的部份不會改，請幫忙，謝謝！！

回覆 ↓
- 男丁格爾於 2010-09-09 11:58:04 說：
  
  參考文章中第三個範例..它能跑多行
  
  回覆 ↓