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

老師我想說不要用項目清單的方式做跑馬,把ul.li都刪了
,然後再把top改成left就不能動了是我搞錯意思嗎??

仿 Yahoo 滾動式訊息跑馬燈

div#abgne_marquee {
position: relative;
overflow: hidden; /* 超出範圍的部份要隱藏 */
width: 375px;
height: 25px;
border: 1px sofloat: leftd #ccc;
}
div#abgne_marquee , div#abgne_marquee {
margin: 0;
padding: 0;
float: leftst-style: none;
}
div#abgne_marquee {
position: absolute;
}
div#abgne_marquee a {
display: block;
overflow: hidden; /* 超出範圍的部份要隱藏 */
font-size:12px;
height: 25px;
float: leftne-height: 25px;
text-decoration: none;
}

$(function(){
// 先取得 div#abgne_marquee ul
// 接著把 ul 中的 float: left 項目再重覆加入 ul 中(等於有兩組內容)
// 再來取得 div#abgne_marquee 的高來決定每次跑馬燈移動的距離
// 設定跑馬燈移動的速度及輪播的速度
var $marquee = $('div#abgne_marquee '),
$marquee = $marquee.append($marquee.html()).children(),
_height = $('div#abgne_marquee').height() * -1,
scrollSpeed = 600,
timer,
speed = 3000 + scrollSpeed;

// 把 $marqueeUl 的 left 設為顯示到第二組內容的第一筆
$marquee.css('left', $marquee.length / 2 * _height);

// 幫左邊 $marqueefloat: left 加上 hover 事件
// 當滑鼠移入時停止計時器；反之則啟動
$marquee.hover(function(){
clearTimeout(timer);
}, function(){
timer = setTimeout(showad, speed);
});

// 控制跑馬燈移動的處理函式
function showad(){
var _now = $marquee.position().left / _height;
_now = (_now - 1 + $marquee.length) % $marquee.length;

// $marqueeUl 移動
$marquee.animate({
left: _now * _height
}, scrollSpeed, function(){
// 如果已經移動到第一組時...則馬上把 left 設為顯示到第二組內容的第一筆
// 藉此產生不間斷的輪播
if(_now == 0){
$marquee.css('left', $marquee.length / 2 * _height);
}
});

// 再啟動計時器
timer = setTimeout(showad, speed);
}

// 啟動計時器
timer = setTimeout(showad, speed);

$('a').focus(function(){
this.blur();
});
});

【開課快訊】04/11 JavaScript & CSS 互動程式入門班 (週日班)
【開課快訊】05/09 Photoshop 影像達人專修班 (週日班)
【調查】你的獎品你來決定 - 活動獎品大調查

44 筆針對 [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。
  
  登入後再回覆
Fu 於 2012-02-16 15:50:55 說：

div#abgne_marquee {
position: relative;
overflow: hidden; /* 超出範圍的部份要隱藏 */
width: 375px;
height: 25px;
border: 1px solid #ccc;

改成

div#abgne_marquee {
position: relative;
overflow: hidden;/* 超出範圍的部份要隱藏 */
width: 375px;
height: 25px;
border: 0px;

就沒邊框了~也不會跑掉

登入後再回覆
highshutpow 於 2012-03-03 18:05:19 說：

男丁老師你好：
請問這個跑馬燈在EXTJS當中，是否有提供click的屬性，因為我的內容文字可能因為時間的不一樣，而內容有所差異，因此需要更新內容文字。
自動更新內容有效能上的考量，所以就需要人為去點選，才會更新內容文字。
還是有其他比較好的做法可以提供呢？

登入後再回覆
- 男丁格爾於 2012-03-06 12:36:18 說：
  
  你可以自己新增一個按鈕來執行你要的功能, 通常就是按下去時利用 ajax 的方式取回資料來顯示。
  
  登入後再回覆
Jelly 於 2013-01-09 15:14:44 說：

請問要怎麼多筆並排顯示?
例如:一排有六筆，然後六筆一起滾動之後，換成另外六筆

登入後再回覆
Allen Allen 於 2013-09-02 23:49:59 說：

請問一下老師
怎樣才能改成由右邊跑到左邊

登入後再回覆
- 男丁格爾於 2013-09-03 15:01:36 說：
  
  li 要改成 float: left, 然後原本程式中控制 ul 的 top 移動要改成 left 才行。
  或者可以試看看 Cycle 這外掛套件。
  
  登入後再回覆
  - Allen Allen 於 2013-09-03 20:28:16 說：
    
    老師謝謝再請問一下,怎樣可以改移動的距離,老師像這種外掛有沒有甚麼書籍可以建議給新手的
    
    登入後再回覆
    - Allen Allen 於 2013-09-03 20:45:32 說：
      
      老師其實我想模仿這網址的效果(IE才可以顯示出它的效果)
      http://www.maedchenwohnheim.at/index-3.html
      
      登入後再回覆
      - 男丁格爾於 2013-09-04 23:27:16 說：
        
        你是要做它下方的那一條嗎@@?
    - 男丁格爾於 2013-09-04 23:27:00 說：
      
      這外掛網站就有基本的使用教學了, 只是它透過一些設定及程式的配合, 就能做出很多種可能。
      建議是搜尋時加上關鍵字 Cycle
      
      登入後再回覆
      - Allen Allen 於 2013-09-05 00:07:41 說：
        
        恩恩下面那一條和上面大圖片的效果
        老師cycle是?? 剛學不懂
      - 男丁格爾於 2013-09-09 17:18:10 說：
        
        它是 jQuery 的一個外掛套件, google 一下 "jQuery Cycle" 就會有了!
      - Allen Allen 於 2013-09-05 00:12:07 說：
        
        老師我想說不要用項目清單的方式做跑馬,把ul.li都刪了
        ,然後再把top改成left就不能動了是我搞錯意思嗎??
        
        仿 Yahoo 滾動式訊息跑馬燈
        
        div#abgne_marquee {
        position: relative;
        overflow: hidden; /* 超出範圍的部份要隱藏 */
        width: 375px;
        height: 25px;
        border: 1px sofloat: leftd #ccc;
        }
        div#abgne_marquee , div#abgne_marquee {
        margin: 0;
        padding: 0;
        float: leftst-style: none;
        }
        div#abgne_marquee {
        position: absolute;
        }
        div#abgne_marquee a {
        display: block;
        overflow: hidden; /* 超出範圍的部份要隱藏 */
        font-size:12px;
        height: 25px;
        float: leftne-height: 25px;
        text-decoration: none;
        }
        
        $(function(){
        // 先取得 div#abgne_marquee ul
        // 接著把 ul 中的 float: left 項目再重覆加入 ul 中(等於有兩組內容)
        // 再來取得 div#abgne_marquee 的高來決定每次跑馬燈移動的距離
        // 設定跑馬燈移動的速度及輪播的速度
        var $marquee = $('div#abgne_marquee '),
        $marquee = $marquee.append($marquee.html()).children(),
        _height = $('div#abgne_marquee').height() * -1,
        scrollSpeed = 600,
        timer,
        speed = 3000 + scrollSpeed;
        
        // 把 $marqueeUl 的 left 設為顯示到第二組內容的第一筆
        $marquee.css('left', $marquee.length / 2 * _height);
        
        // 幫左邊 $marqueefloat: left 加上 hover 事件
        // 當滑鼠移入時停止計時器；反之則啟動
        $marquee.hover(function(){
        clearTimeout(timer);
        }, function(){
        timer = setTimeout(showad, speed);
        });
        
        // 控制跑馬燈移動的處理函式
        function showad(){
        var _now = $marquee.position().left / _height;
        _now = (_now - 1 + $marquee.length) % $marquee.length;
        
        // $marqueeUl 移動
        $marquee.animate({
        left: _now * _height
        }, scrollSpeed, function(){
        // 如果已經移動到第一組時...則馬上把 left 設為顯示到第二組內容的第一筆
        // 藉此產生不間斷的輪播
        if(_now == 0){
        $marquee.css('left', $marquee.length / 2 * _height);
        }
        });
        
        // 再啟動計時器
        timer = setTimeout(showad, speed);
        }
        
        // 啟動計時器
        timer = setTimeout(showad, speed);
        
        $('a').focus(function(){
        this.blur();
        });
        });
        
        【開課快訊】04/11 JavaScript & CSS 互動程式入門班 (週日班)
        【開課快訊】05/09 Photoshop 影像達人專修班 (週日班)
        【調查】你的獎品你來決定 - 活動獎品大調查
      - 男丁格爾於 2013-09-09 17:19:49 說：
        
        這要先看程式有沒有什麼錯誤訊息, 再來看你的排版畫面是不是正確才行。
      - Allen Allen 於 2013-09-05 00:27:31 說：
        
        老師我是想說跑馬燈美ㄍ圖片設3秒,然後上面的大圖片也設3秒
        ,這樣就會有一啟動的樣子
      - Allen Allen 於 2013-09-07 23:43:46 說：
        
        老師找了好多都找不到我需要的有甚麼可以建議的嗎?
      - 男丁格爾於 2013-09-09 17:25:09 說：
        
        先 google 看看 "jQuery Cycle" !!
      - Allen Allen 於 2013-09-12 19:46:40 說：
        
        老師謝謝目前OKㄌ
monika 於 2014-08-22 12:13:36 說：

您好，請問用筆電的chrom看時，為什麼最後一個訊息結束往最上面跑的時候，他會先停空白訊息，之後才出現正確的內容呢？
http://www.xson.net/agma/test.htm
謝謝您

登入後再回覆
zivhsiao 於 2014-10-08 15:48:27 說：

請問一下，這款是否商業授權的 license
謝謝！！

登入後再回覆
- 男丁格爾於 2014-10-14 22:54:41 說：
  
  用在商業網站上ok
  
  登入後再回覆

發表迴響取消回覆

抱歉，你必須要登入才能發表迴響喔！

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

發表迴響 取消回覆

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

發表迴響取消回覆