男丁格爾's 脫殼玩

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

廣告的效果就是要讓消費者購買，當然第一步就是要先能吸引人看廣告。如果各位有進入到Yahoo!奇摩首頁的話，可能很多人多少都會被那用詞超誇張的訊息跑馬燈所引誘並點擊廣告

雖然它只是一般的訊息跑馬燈的效果，但運用了標題式的圖示及嚇死人不償命的文字內容，就讓瀏覽者有不一樣的感受。這次筆者就來教各位如何用 jQuery 來做一個類似的跑馬燈。

首先當然是要有廣告的項目內容：

檢視原始碼 HTML

<body>
	<div id="abgne_marquee">
		<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>
</body>

接著再用 CSS 來裝飾它，並讓畫面只能看到一筆的內容：

檢視原始碼 CSS

div#abgne_marquee {
	position: relative;
	overflow: hidden;	/* 超出範圍的部份要隱藏 */
	width: 375px;
	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;
}
div#abgne_marquee ul li a {
	display: block;
	overflow: hidden;	/* 超出範圍的部份要隱藏 */
	font-size:12px;
	height: 25px;
	line-height: 25px;
	text-decoration: none;
}

其實這邊用到的 CSS 都是很常見的用法，當設計完後就能看到雛型了

接下來比較要注意的是程式處理的部份：

檢視原始碼 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;
 
	// 幫左邊 $marqueeli 加上 hover 事件
	// 當滑鼠移入時停止計時器；反之則啟動
	$marqueeli.hover(function(){
		clearTimeout(timer);
	}, function(){
		timer = setTimeout(showad, speed);
	});
 
	// 控制跑馬燈移動的處理函式
	function showad(){
		var _now = $marqueeUl.position().top / _height;
		_now = (_now + 1) % $marqueeli.length;
 
		// $marqueeUl 移動
		$marqueeUl.animate({
			top: _now * _height
		}, scrollSpeed, function(){
			// 如果已經移動到第二組時...則馬上把 top 設 0 來回到第一組
			// 藉此產生不間斷的輪播
			if(_now == $marqueeli.length / 2){
				$marqueeUl.css('top', 0);
			}
		});
 
		// 再啟動計時器
		timer = setTimeout(showad, speed);
	}
 
	// 啟動計時器
	timer = setTimeout(showad, speed);
 
	$('a').focus(function(){
		this.blur();
	});
});

因為要做到訊息跑馬燈能不間斷的輪播，所以筆者就把原來的廣告項目再完整的複製了一份並加入，這樣當訊息顯示到第二組的第一筆時，我們就能用迅雷不及掩耳的速度再把它移到第一組的第一筆，讓瀏覽者產生一種不間斷輪播的 Magic 效果。

現在做的是往上滾動的跑馬燈，若是要往下滾動的話，只要稍微修改一下程式：

檢視原始碼 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;
 
	// 把 $marqueeUl 的 top 設為顯示到第二組內容的第一筆
	$marqueeUl.css('top', $marqueeli.length / 2 * _height);
 
	// 幫左邊 $marqueeli 加上 hover 事件
	// 當滑鼠移入時停止計時器；反之則啟動
	$marqueeli.hover(function(){
		clearTimeout(timer);
	}, function(){
		timer = setTimeout(showad, speed);
	});
 
	// 控制跑馬燈移動的處理函式
	function showad(){
		var _now = $marqueeUl.position().top / _height;
		_now = (_now - 1 + $marqueeli.length) % $marqueeli.length;
 
		// $marqueeUl 移動
		$marqueeUl.animate({
			top: _now * _height
		}, scrollSpeed, function(){
			// 如果已經移動到第一組時...則馬上把 top 設為顯示到第二組內容的第一筆
			// 藉此產生不間斷的輪播
			if(_now == 0){
				$marqueeUl.css('top', $marqueeli.length / 2 * _height);
			}
		});
 
		// 再啟動計時器
		timer = setTimeout(showad, speed);
	}
 
	// 啟動計時器
	timer = setTimeout(showad, speed);
 
	$('a').focus(function(){
		this.blur();
	});
});

當然筆者只是用較為簡單的方式來當範例，如果再加上一點點設計就能變成帶有圖示的訊息跑馬燈：

相信依各位的設計能力來做的話，效果是不會輸給 Yahoo!奇摩的啦！

範例 1 範例 2 範例 3

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

Ext JS 版：

範例 1 範例 2 範例 3

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

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

« 前一頁 1 2

onesan 於 2011-05-13 16:16:21 說：

我發現不完全是jQuery的程式碼耶，裡面的timer,clearTimeout,似乎是javascript的.雖然jQuery本來就是javascript，但是不知道能不能完全用jQuery語法去寫出跑馬燈呢？

回覆 ↓
- 男丁格爾於 2011-05-17 09:07:52 說：
  
  阿這..jQuery 本來就是用 JavaScript 寫出來的, 基本的 if...else...就是 JavaScript, 沒有什麼純的 jQuery 的 if...else...
  setTimeout 也是..XD
  除非有人閒到包這些在包成另一個 function 掛在 jQuery 上面
  
  回覆 ↓
kasn1122 於 2011-06-20 13:59:56 說：

感謝大大這個部分還特地分兩個版本~

回覆 ↓
as 於 2011-07-28 01:52:53 說：

謝謝
丁格爾君

回覆 ↓
learning 於 2012-01-29 17:33:40 說：

不好意思我想問說我用了jquery的.empty()把li清空再.append()新的li 要如何再讓他繼續執行跑馬燈的功能阿?謝謝~

回覆 ↓
- 男丁格爾於 2012-01-31 13:59:03 說：
  
  你都清掉了..那當然會有問題!!
  一種作法是把整個產生跑馬燈的程式包成另一個 function, 然後當你重新 append 後再執行一次該 function。
  
  回覆 ↓

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

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

發表迴響 取消回覆

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

發表迴響取消回覆