Home » jQuery 外掛

[jQ]Lettering.JS 0.6

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



Lettering.JS 能把指定的內容文字用特定的方式來拆開，加上自訂的樣式就能產生像彩虹般的效果。

套件名稱：Lettering.JS
套件版本：0.6
作者網站：http://daverupert.com/2010/09/lettering-js/
套件網址：N/A
發佈日期：2010-09-13
檔案大小：1.64 KB
檔案下載：jquery.lettering.js

參數說明：

檢視原始碼 JavaScript
1
2
3

method(選填)
描述： 要用那種方式來拆開內容；若沒提供則用 'letters'，允許的值有：'letters', 'words' 及 'lines'
預設值： 無

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定的區塊內容文字加入 Lettering.JS 效果
$(selector).lettering(method);

使用範例：

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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lettering.js"></script>
<style type="text/css">
.char1, .word1, .line2 { color: red; }
.char2, .word2, .line2 { color: orange; }
.char3, .word3, .line3 { color: #f0c; }
.char4, .word4, .line4 { color: blue; }
.char5, .word5, .line5 { color: green; }
.char6, .word6, .line6 { color: indigo; }
.char7, .word7, .line7 { color: violet; }
.char8, .word8, .line8 { color: pink; }
.char9, .word9, .line9 { color: purple; }
.char10, .word10, .line10 { color: gray; }
</style>
<script type="text/javascript">
	$(function(){
		// 把每一個字都拆開
		$('#demo1 h1').lettering();
 
		// 用空白來拆開
		$('#demo2 h1').lettering('words');
 
		// 用換行符號來拆開
		$('#demo3 p').lettering('lines');
 
		// 用空白來拆開後再把每一個字都拆開
		$('#demo4 h1').lettering('words').children('span').lettering();
 
		// 把每一個字都拆開再設定特殊樣式
		$('#demo5 h1').lettering().children('span').css({
			'display' : 'inline-block', 
			'-webkit-transform' : 'rotate(-25deg)'
		});
	});
</script>
 
<body>
	<div id="demo1" class="demo">
		<h1>男丁格爾's 脫殼玩</h1>
	</div>
 
	<div id="demo2" class="demo">
		<h1>This is a book.</h1>
	</div>
 
	<div id="demo3" class="demo">
		<p>有時清單項目太長時都是要做分頁的<br />但真正的分頁是要靠後端程式跟資料庫的配合<br />若一般設計者不會寫程式的話<br />那就得來試試 JQuery Quick Pagination<br />除了能自訂每頁筆數之外<br />還能控制是否顯示頁數等資訊呢。</p>
	</div>
 
	<div id="demo4" class="demo">
		<h1>This is a advanced example.</h1>
	</div>
 
	<div id="demo5" class="demo">
		<h1>男丁格爾's 脫殼玩</h1>
	</div>
</body>
範例 1

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

備註：
Lettering.JS 只是很單純的把內容文字拆開，每一組拆開後的文字都會用 span 來包裹，且 className 會依指定的類型有所不同：'letters'->'char', 'words'->'word' 及 'lines'->'line'，同時會從 1 開始依序加上編號。

發表迴響