檢視原始碼 HTML
1
2
3
4
5
6
7
8
9

<body>
					<div id="abgne_marquee">
					<ul>
					<li><a href="http://www.eyny.com/">【討論區】伊莉,伊莉討論區,伊莉論壇</a></li>
					<li><a href="http://線上廣播電台.blogspot.tw/2011/03/24h_16.html">【音樂】24H情歌精選-豆瓣FM by 線上音樂</a></li>
					<li><a href="http://game.sina.com.tw/">【遊戲】新浪遊戲,遊戲新聞,小遊戲,免費遊戲,麻將,象棋,大老二,連線遊戲</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;
}
檢視原始碼 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
51
52
53
54
55
56
57

$(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();
					});
});
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-10470597-3']);
					_gaq.push(['_trackPageview']);
					(function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
					var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();