男丁格爾'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

keyjus 於 2010-09-09 15:05:42 說：

感謝提供！！這個效果很好，雖然跟原來的意思有些不同，
但是這樣一頁、一頁的跑也是蠻好的，
如果想將其改成一條一條 run 的動作不知道還可不可行?

回覆 ↓
- 男丁格爾於 2010-09-09 15:08:41 說：
  
  你有看過程式嗎..?_moveItems 就能設定一次要移動幾筆了
  
  回覆 ↓
keyjus 於 2010-09-09 15:33:29 說：

看到可以改一次移動多少的控制項了，感謝！！就是需要這樣的效果
謝謝！！

回覆 ↓
::crux:: 於 2010-10-05 16:13:00 說：

太棒了~
加強版感覺利害多了
感謝大師分享

回覆 ↓
遠古於 2011-04-29 18:51:58 說：

不好意思請問
範例二裡跑馬燈的訊息裡的
hot、超激、破盤
這三個是圖片嗎?
小弟一直找不到
可以麻煩解說嗎?

回覆 ↓
- 男丁格爾於 2011-05-04 09:05:26 說：
  
  這些都是背景圖片: http://demonstration.abgne.tw/jquery/0025/back.gif
  
  回覆 ↓
遠古於 2011-05-04 08:45:13 說：

問題解決

回覆 ↓
lolovivi.lee 於 2011-06-23 13:12:34 說：

男丁大大好~小女子我用到一半就出現問題了...我想再同一格中輸入三個不同文字，分別不同連結，但不管怎麼測試...就是只能跳到下一格才出現...救救我Q_Q

回覆 ↓
- 男丁格爾於 2011-06-27 14:29:50 說：
  
  唔, 要有問題範例才知道那邊有問題
  
  回覆 ↓
lolovivi.lee 於 2011-06-27 17:02:33 說：

我跑去討論區發問了XD也把我改過的上傳了

回覆 ↓
- 男丁格爾於 2011-06-28 15:51:01 說：
  
  因為現在 li a 是 block, 所以把它拿掉就可以一個 li 中顯示多個超連結了
  
  回覆 ↓
樂愛度假於 2012-01-09 04:45:30 說：

您好，想請問我使用這個功能後，確實可以使用，
不過為什麼原本網站內的"下拉式選單"功能就消失了呢？

（PS. 因為不懂語法，所以我是把HTML、JS、CSS等都複製貼上在index.php。XD）

回覆 ↓
- 男丁格爾於 2012-01-09 16:02:27 說：
  
  理論上應該不是有什麼影響才對，但實際的問題還是要看到你網頁才知道!!
  
  回覆 ↓
  - 樂愛度假於 2012-01-09 20:30:56 說：
    
    謝謝您的回覆。
    
    這是我的網址：http://lovei.tw
    
    這是我昨天放置在index.php裡的樣子：http://lovei.tw/wp-content/others/index.rar
    
    謝謝男丁格爾。
    
    回覆 ↓
    - 男丁格爾於 2012-01-10 10:11:02 說：
      
      你..你整個放進去當然是不行。
      基本上你只需要把 css, javascript 及 div#abgne_marquee 放到你網頁中就可以了。
      
      回覆 ↓
男丁格爾於 2012-01-10 10:52:18 說：
抱歉, 這是其中加了一段 code 的關係, 請你把程式中最後幾行的

檢視原始碼 JavaScript
1 2 3
$('a').focus(function(){ this.blur(); });
拿掉就好
回覆 ↓
- 樂愛度假於 2012-01-11 05:10:31 說：
  
  感謝你的回覆^^
  
  我想我這方面學習的還不夠。
  
  我把css放在style.css
  HTML放在index.php
  不過不知道javascript該放在哪裡，或是該建立新檔案放置；
  也試了笨方法"整個放進去"～再刪除這串
  $('a').focus(function(){
  this.blur();
  });
  跑馬燈仍會運行，但下拉式選單功能卻出不來。
  
  後來我嘗試刪除這串：
  
  下拉式選單是恢復了，但跑馬燈卻掛了XD
  
  不管如何，仍然很感謝你熱心的回覆與幫忙，
  果然是有大愛的"南丁格爾"～XD
  我在WP要學習的還很多^^
  
  回覆 ↓
  - 男丁格爾於 2012-01-11 15:15:28 說：
    
    已修改回信給你了!!
    
    回覆 ↓
ki 於 2012-02-20 18:24:46 說：

哈囉~請問一下，相同一個頁面放2個跑馬燈，是不是會互相影響啊?
滑鼠移到A，A靜止不動，B繼續動，測試了幾次，A會錯亂，一下跑快一下上下亂轉。
謝謝唷^^

回覆 ↓
- 男丁格爾於 2012-02-21 10:15:55 說：
  
  因為範例並不是寫成外掛的方式, 所以若是要同時套用多個的話, 偷懶的作法是把每一組的 id 都取不一樣，然後程式一樣複製兩次再修改 id。
  
  回覆 ↓