Home » jQuery 外掛

[jQ]Art Text Light jQuery plugin 0.1.0

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



Art Text Light jQuery plugin 可以把指定區塊內的文字利用改變 CSS 屬性來做出突顯的 highlight 的效果。

套件名稱：Art Text Light jQuery plugin
套件網址：0.1.0
作者網站：http://www.artetics.com/Articles/art-text-light-jquery-plugin
套件網址：N/A
發佈日期：2011-08-16
檔案大小：4.19 KB
檔案下載：arttextlight.js

HTML 屬性說明：

檢視原始碼 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

letterHighlighSpeed(選填)
描述： 每一個字 highlight 的速度(1000毫秒 = 1秒)
預設值： 50
 
removeHighlighSpeed(選填)
描述： 每一個字 highlight 的時間(1000毫秒 = 1秒)
預設值： 300
 
highlightInterval(選填)
描述： 每次 highlight 的速度(1000毫秒 = 1秒)
預設值： 2000
 
css1(選填)
描述： 當 highlight 時要套用的 CSS 屬性
預設值： {
	'color': 'white', 
	'text-shadow': '1px 1px 3px #FFFFFF'
}
 
css2(選填)
描述： 當 highlight 後要套用的 CSS 屬性
預設值： {
	'color': 'white', 
	'text-shadow': '1px 1px 3px #FFFFFF'
}

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定的區塊加上 artTextLight 效果
$(selector).artTextLight(options);

使用範例：

檢視原始碼 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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="arttextlight.js"></script>
<style type="text/css">
	.container {
		background: #666;
		padding: 15px;
	}
	.text {
		color: #000;
	}
	.text2 {
		color: #fff;
		font-size: 54px;
		line-height: 84px;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 每隔 3 秒進行一次 highlight 顯示
		// highlight 時顏色為 #fff
		$('#text').artTextLight({
			highlightInterval: 3000, 
			css1: {
				color: '#fff'
			}, 
			css2: {
				color: '#000'
			}
		});
 
		// 每隔 4 秒進行一次 highlight 顯示
		// highlight 時文字顏色為 #f00, 文字陰影為 0 0 54px green
		// highlight 時停留 0.6 秒
		$('#text2').artTextLight({
			highlightInterval: 4000, 
			removeHighlighSpeed: 600,
			css1: {
				color: '#f00', 
				textShadow: '0 0 54px green'
			}, 
			css2: {
				color: '#fff', 
				textShadow: 'none'
			}
		});
	});
</script>
 
<body>
	<div class="container">
		<span id="text" class="text">男丁格爾's 脫殼玩 http://abgne.tw</span>
		<br />
		<span id="text2" class="text2">彭博專欄作家：蘋果為何害怕宏達電手機 甚至不讓人用？</span>
	</div>
</body>
範例 1

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

2 筆針對 [jQ]Art Text Light jQuery plugin 0.1.0 的迴響

發表迴響