Home » jQuery 外掛

[jQ]jTicker 0.9.1 beta

[ 日期： | 瀏覽：4,049 | 迴響：4 ]
範例 1
請協助我把這個效果加到我的網站 (只要 900 元)
沒錯!只要 900 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



jTicker 可將指定區塊中的內容文字利用類似打字機效果的方式來一個字一個字的"打"出來。除了可隨意的控制輪播與否，也能自動游標指示器的樣式及速度哩！

套件名稱：jTicker 0.9.1
套件版本：0.9.1 beta
作者網站：http://webdev.stephband.info/jticker/
套件網址：N/A
發佈日期：2009-04-15
檔案大小：6.45 KB
檔案下載：jquery.jticker.js

參數選項說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

rate(選填)
描述： 顯示每個字的速度；單位毫秒(1000毫秒 = 1秒)
預設值： 40
 
delay(選填)
描述： 每組訊息間停留時間；單位毫秒(1000毫秒 = 1秒)
預設值： 2000
 
cursorList(選填)
描述： 輸出每個字的游標指示器；若指定為陣列的話，則會依序替換。
預設值： "_"
 
cursor(選填)
描述： 游標指示器
預設值： jQuery('<span class="cursor" />')

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 把指定的元素加上 jTicker 效果
$(selector).ticker(options);
 
// 開始輪播
$(selector).trigger("play");
 
// 停止輪播
$(selector).trigger("stop");
 
// 動態改變 jTicker 設定及樣式
$(selector).trigger({
	type: "control", 
	nextItem: e.item,
	rate: e.rate,
	delay: e.delay
});

使用範例：

檢視原始碼 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jticker.js"></script>
<style type="text/css">
	#ticker {
		width: 500px;
	}
	#ticker .cursor {
		display: inline-block;
		background: red;
		width: 7px;
		height: 12px;
		text-align: center;
	}
	#ticker p {
		margin-bottom: 9px;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 指定 jTicker 效果並播放
		$("#ticker").ticker({
			cursorList: " ",
			rate: 10, 
			delay: 4000
		}).trigger("play").trigger("stop");
 
		// 當點擊 .next 時自動播放下一組
		$(".next").live("click", function(){
			$("#ticker").trigger("play").trigger("stop");
			return false;
		});
 
		// 當點擊 .stop 時停止輪播
		$(".stop").click(function(){
			$("#ticker").trigger("stop");
			return false;
		});
 
		// 當點擊 .play 時自動輪播
		$(".play").click(function(){
			$("#ticker").trigger("play");
			return false;
		});
 
		// 當點擊 .speedup 時加速
		$(".speedup").click(function(){
			$("#ticker").trigger({
				type: "control",
				item: 0,
				rate: 10,
				delay: 4000
			});
			return false;
		});
 
		// 當點擊 .slowdown 時減速
		$(".slowdown").click(function(){
			$("#ticker").trigger({
				type: "control",
				item: 0,
				rate: 90,
				delay: 8000
			})
			return false;
		});
 
		// 當點擊 .style 時改變樣式
		$(".style").click(function(){
			$("#ticker").trigger({
				type: "control",
				cursor: $("#ticker").data("ticker").cursor.css({
					width: 48,
					background: "blue"
				})
			});
			return false;
		});
	});
</script>
 
<body>
	<div><a href="#" class="play">play</a> | <a href="#" class="stop">stop</a> | <a href="#" class="speedup">Speed Up</a> | <a href="#" class="slowdown">Speed Down</a> | <a href="#" class="style">Change Style</a></div>
	<div id="ticker">
		<div>
		  <h3>男丁格爾's 脫殼玩</h3>
			<p>分享各種 jQuery 外掛的使用及 jQuery 跑馬燈、廣告輪播及選單等實用的 jQ 範例。</p>
			<a class="next" href="#">next</a>
		</div>
		<div>
		  <h3>What does jTicker do?</h3>
			<p>jTicker takes an elements' children and displays them one by one, in sequence, writing their text 'ticker tape' style. It is smart enough to ticker text from an element heirarchy, inserting elements back into the DOM tree as it needs them. That means almost any content can be 'tickered'.</p>
			<p>It can be controlled with jQuery events.</p>
			<a class="next" href="#">next</a>
		</div>
		<div>
		  <h3>Not my cup of tea, really, ...</h3>
			<p>annoying little blinky things trying to distract attention when you want to get on with the serious business of reading a website, but if it's your thing, here it is.</p>
			<p>I have a friend in an agency in London who needed it. That's my only excuse.</p>
			<a class="next" href="#">next</a>
		</div>
		<div>
			<h3>jTicker has some neat features:</h3>
			<ul>
				<li>jTicker can be declared on any element, and it respects that element's DOM tree, printing it back out with the same hierarchy.</li>
				<li>jTicker handles any number of alternating cursors (or just one).</li>
				<li>jTicker's cursor container is styleable using the class .cursor, or can be defined as your own jQuery object</li>
				<li>jTicker reacts to jQuery events "play", "stop" and "control". You can try them out below.</li>
			</ul>
			<a class="next" href="#">next</a>
		</div>
 
		<div>
			<h3>There is one caveat:</h3>
			<ul>
				<li><span>jTicker can't understand text and children at the same level (I don't know how to do that yet), so if you want some text and then a link, you have to wrap the text in, say, a span, like this:</span>
					<code>|span| some text |/span| |a|and then a link|/a|</code>
				</li>
				<li>But obviously not with those brackets. That's another thing, jTicker is not good at handling html character entities. So make that two caveats.</li>
			</ul>
			<a class="next" href="#">next</a>
		</div>
	</div>
</body>
範例 1

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

4 筆針對 [jQ]jTicker 0.9.1 beta 的迴響

發表迴響