Home » jQuery 外掛

[jQ]TextShadow

範例 1
沒錯!只要 300 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!



text-shadowCSS3 才有的屬性,想當然的在 IE6~8 中是一定不支援的。TextShadow 外掛套件則是利用了產生另一層一樣內容的區塊疊在一起,然後做出模擬 text-shadow 的假像,不過並不支援模糊效果。

套件名稱:TextShadow
套件網址:N/A
作者網站:http://www.nealgrosskopf.com/tech/thread.php?pid=61
套件網址:N/A
發佈日期:2009-11-07
檔案大小:745 Bytes
檔案下載:jquery.textShadow.js

HTML 屬性說明:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
shadowcolor(必填)
描述: 文字陰影的顏色
預設值: 無
 
x(必填)
描述: 文字陰影的 x 偏移值
預設值: 無
 
y(必填)
描述: 文字陰影的 y 偏移值
預設值: 無

方法說明:

檢視原始碼 JavaScript
1
2
// 在指定的區塊上產生文字陰影效果
$(selector).textShadow(shadowcolor, x, y);

使用範例:

檢視原始碼 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
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.textShadow.js"></script>
<style type="text/css">
	.text-shadow-wrapper {
		position: relative;
	}
	.text-shadow, .shadow {
		position: absolute;
		top: 0;
		left: 0;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 文字陰影在右下
		$('.a').textShadow('#ccc', 3, 3);
 
		// 文字陰影在左上
		$('.b').textShadow('#ccc', -3, -3);
 
		// 文字陰影在右邊
		$('.c').textShadow('#ccc', 3, 0);
	});
</script>
 
<body>
	<p>
		<span class="a">男丁格爾's 脫殼玩</span>
	</p>
 
	<p>
		<span class="b">http://abgne.tw</span>
	</p>
 
	<p>
		<span class="c">Text Shadow</span>
	</p>
</body>
範例 1

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

2 筆針對 [jQ]TextShadow 的迴響

  1. 男丁大
    問一下,如果網頁中JQ的JS檔案,從原本的jquery-1.2.6.min更換到jquery-1.7.2
    那麼JQ效果還是跟原本一樣嗎? 這樣更換會不會有風險?

    • 因為你要從 1.2.6 跳到 1.7.2, 這可能會有些地方也許會有問題(只是也許)
      主要還是要看現有的程式語法是否有用到已不支援的, 可以先試著更新後再看問題在那

發表迴響