Home » jQuery 應用

[jQ]用 jQuery 做跑馬燈 – 仿 Yahoo 滾動式訊息跑馬燈

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

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



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

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

1
2
3
4
5
6
7
8
9
<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 來裝飾它,並讓畫面只能看到一筆的內容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
$(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
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
$(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

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

  • [jQ]用 jQuery 做跑馬燈 – 仿 Yahoo 滾動式訊息跑馬燈加強版
  • [jQ]用 jQuery 做廣告 – 仿 Yahoo 切換式 N 格圖片廣告
  • [jQ]仿 Yahoo 滑出式說明描述
  • [jQ]用 jQuery 做跑馬燈 – 仿 Twitter 的附加式訊息跑馬燈
  • [jQ]用 jQuery 做廣告 – 仿 Yahoo  切換式兩格圖片廣告
  • [jQ]用 jQuery 做廣告 – 仿 Yahoo 標籤式垂直廣告輪播

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

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

    • 阿這..jQuery 本來就是用 JavaScript 寫出來的, 基本的 if...else...就是 JavaScript, 沒有什麼純的 jQuery 的 if...else...
      setTimeout 也是..XD
      除非有人閒到包這些在包成另一個 function 掛在 jQuery 上面

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

    • 你都清掉了..那當然會有問題!!
      一種作法是把整個產生跑馬燈的程式包成另一個 function, 然後當你重新 append 後再執行一次該 function。

  3. 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;

    就沒邊框了~也不會跑掉

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

    • 你可以自己新增一個按鈕來執行你要的功能, 通常就是按下去時利用 ajax 的方式取回資料來顯示。

    • li 要改成 float: left, 然後原本程式中控制 ul 的 top 移動要改成 left 才行。
      或者可以試看看 Cycle 這外掛套件。

      • 老師謝謝 再請問一下,怎樣可以改移動的距離,老師像這種外掛有沒有甚麼書籍可以建議給新手的

        • 這外掛網站就有基本的使用教學了, 只是它透過一些設定及程式的配合, 就能做出很多種可能。
          建議是搜尋時加上關鍵字 Cycle

          • 恩恩 下面那一條和上面大圖片的效果
            老師cycle是?? 剛學不懂

          • 它是 jQuery 的一個外掛套件, google 一下 "jQuery Cycle" 就會有了!

          • 老師我想說不要用項目清單的方式做跑馬,把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 影像達人專修班 (週日班)
            【調查】你的獎品你來決定 - 活動獎品大調查

          • 這要先看程式有沒有什麼錯誤訊息, 再來看你的排版畫面是不是正確才行。

          • 老師我是想說跑馬燈美ㄍ圖片設3秒,然後上面的大圖片也設3秒
            ,這樣就會有一啟動的樣子

          • 老師 找了好多都找不到我需要的 有甚麼可以建議的嗎?

發表迴響