檢視原始碼 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);
  })();