Home » jQuery 外掛

[jQ]jQuery Glow

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



jQuery Glow 利用 CSS3 的 text-shadow 的方式來幫元素加上簡單的光暈效果。若瀏覽器不支援 text-shadow 的話，則只會看到文字顏色的改變，就不會看到光暈囉！

套件名稱：jQuery Glow
套件網址：N/A
作者網站：https://github.com/nakajima/jquery-glow
套件網址：N/A
發佈日期：2009-06-25
檔案大小：1.77 KB
檔案下載：jquery-glowing.js
額外資源：jquery.color.js

參數選項說明：

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

textColor(選填)
描述： 當滑鼠移上去後文字顏色
預設值： '#fff'
 
haloColor(選填)
描述： 光暈的顏色
預設值： '#777'
 
radius(選填)
描述： 光暈的半徑
預設值： 20
 
duration(選填)
描述： 產生光暈效果的速度(1000毫秒 = 1秒)
預設值： 500

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定的元素加上 Glow 效果
$(selector).addGlow(opts);

使用範例：

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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript" src="jquery-glowing.js"></script>
<style type="text/css">
	body {
		font-family: Helvetica;
		font-weight: bold;
		background: #101010;
		color: #555;
    }
    .sample {
		width: 800px;
		margin: 0 auto;
    }
    a {
		font-size: 64px;
		text-decoration: none;
		color: #777;
    }
</style>
<script type="text/javascript">
	$(function(){
		// 當滑鼠移到 .white 時, 文字變成 white
		// 周圍模糊光暈顏色為 red
		// 光暈半徑為 100px
		$('.white').addGlow({
			textColor: 'white', 
			haloColor: 'red', 
			radius: 100
		});
 
		// 當滑鼠移到 .blue 時, 文字變成 #00f
		// 周圍模糊光暈顏色為 #00f
		// 光暈半徑為 100px
		$('.blue').addGlow({
			textColor: '#00f', 
			haloColor: '#00f', 
			radius: 100
		});
 
		// 當滑鼠移到 .green 時, 文字變成 #0f0
		// 周圍模糊光暈顏色為 #0f0
		// 光暈半徑為 100px
		$('.green').addGlow({
			textColor: '#0f0', 
			haloColor: '#0f0', 
			radius: 100
		});
 
		// 當滑鼠移到 .red 時, 文字變成 #f00
		// 周圍模糊光暈顏色為 #f00
		// 光暈半徑為 100px
		$('.red').addGlow({
			textColor: '#f00', 
			haloColor: '#f00', 
			radius: 100
		});
	});
</script>
 
<body>
	<div class="sample">
		<p><a href="http://github.com/nakajima/jquery-glow" class="white">Hover over me.</a></p>
		<p><a class="green" href="http://github.com/nakajima/jquery-glow">Me too.</a></p>
		<p><a class="blue" href="http://github.com/nakajima/jquery-glow">I'm blue.</a></p>
		<p><a class="red" href="http://github.com/nakajima/jquery-glow">Redified.</a></p>
	</div>
</body>
範例 1

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

2 筆針對 [jQ]jQuery Glow 的迴響

發表迴響