快捷導(dǎo)航

封裝了一個(gè)自動(dòng)生成漸變字的JS類(clip)

更新時(shí)間：2008年11月02日 00:22:20 作者：

之前做過一個(gè)生成漸變字體的簡單演示今天閑著沒事就把這個(gè)功能完善了，把JS代碼封裝成一個(gè)類，載入頁面就可以使相應(yīng)的HTML元素內(nèi)部的字體產(chǎn)生漸變色。

你需要做的只是在HTML頁面里面把需要用到漸變色的文字加上外容器（span標(biāo)簽或者a標(biāo)簽都可以），再給這個(gè)標(biāo)簽加入name屬性做漸變元素的標(biāo)示，rel屬性指示漸變的顏色，rel屬性的格式很重要：

復(fù)制代碼代碼如下:

rel="#十六進(jìn)制顏色-#十六進(jìn)制顏色"

少一個(gè)或多一個(gè)字符都不行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS+JS多彩漸變字</title>  <style type="text/css"> body{font:12px/1.5 arial} h3{padding:10px;margin:0;background-color:#c00;border:1px dashed #fff;color:#fff;font:16px/1.5 arial;} p{font:16px/1.5 "黑體",arial;padding:5px 10px;margin:0;} .code{padding:8px;} .box{background-color:#fff;border:1px dashed #f60;margin:8px 0;padding:5px;list-style-position:inside} .box li{padding:0;} .f999{color:#999;} a:link{text-decoration:none;} a:hover{text-decoration:underline;} a:visited{text-decoration:underline;} address{background-color:#f1f1f1;border:1px dashed #ddd;padding:10px;font-style:normal;color:#999;} address a,address a:visited{color:#c00;} </style> </head> <body> <div style="width:400px;margin:0 auto;background-color:#FFFFCC"> <h3><strong>CSS+js多彩漸變字使用說明</strong></h3> <div   id="wppm3vysvbp"   class="code"> 首先在HTML頁面中引入clip.js，然后給需要漸變效果的HTML元素（比如SPAN）添加name屬性和rel屬性，格式如下： <div   id="wppm3vysvbp"   class="box">     &lt;span name="clip:g" rel="#00ffff-#000000"&gt;藍(lán)黑漸變文字&lt;/span&gt; </div> <ol class="box">     <li>name屬性作為漸變標(biāo)示，name值不正確，將不會(huì)產(chǎn)生效果；</li>     <li>rel值提供頭和尾的顏色，以16進(jìn)制顏色代碼為準(zhǔn)，格式為"起始顏色-末端顏色"，其他格式不予支持。格式不正確將不產(chǎn)生效果。</li>     <li>最后需要在頁面上加上clip.gradient().init({t:["SPAN","A"]});這段代碼生成漸變色。</li> </ol> <p> 演示：<span name="clip:g" rel="#00ffff-#000000">藍(lán)黑漸變文字</span>  這是一段文字，我們可以隨意挑選幾個(gè)字做<span name="clip:g" rel="#ff008f-#00ff00">漸變效果</span>，字體的樣式<span name="clip:g" rel="#cc0000-#00ffff">隨頁面的全局樣式變化</span>，和本JS無關(guān)，這里用黑體可以看的更仔細(xì)。 </p> <div   id="wppm3vysvbp"   class="box">由紅轉(zhuǎn)灰的漸變鏈接：<a  name="clip:g" rel="#ff0000-#666666">我是連接，用A標(biāo)簽</a></div> </div> <address> Designed by Silence,轉(zhuǎn)載請(qǐng)注明出處  <a name="clip:g" rel="#ff0000-#0000ff"  title="文章地址">http://www.silentash.com/?id=110</a> </address> </div>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

怎么樣，效果很炫吧，嘿嘿！

這樣的一個(gè)效果的HTML代碼是這樣的：
字體的樣式

復(fù)制代碼代碼如下:

<span name="clip:g" rel="#cc0000-#00ffff">隨頁面的全局樣式變化</span>

，
就是這么簡單，先用span元素包含文字，再給span元素加上標(biāo)示和顏色值就可以了！不難吧。

最后在HTML文檔的最后位置插入JS代碼給有標(biāo)示的元素著色

<script type="text/javascript">
clip.gradient().init({t:["SPAN","A"]});
</script>
其中的{t:["SPAN","A"]}這個(gè)參數(shù)指示了需要給出反應(yīng)的元素，現(xiàn)在是只針對(duì)SPAN和A標(biāo)簽，如果你需要給DIV內(nèi)部的文字也使用漸變色，就需要寫成{t:["SPAN","A","DIV"]}，本來這句也可以一起封裝到JS文件里面，不過考慮到每個(gè)人的需求不同，所以放外面方便配置。

如果有些用戶的瀏覽器禁用了JS也不用擔(dān)心頁面出現(xiàn)錯(cuò)亂或者其他問題。
PS:一直讓我覺得這個(gè)漸變方法有用武之地的是它可以完美的支持所有瀏覽器（禁用JS的除外=.=!）

您可能感興趣的文章: