封裝了一個自動生成漸變字的JS類(clip)

2019-11-21 01:34:28

字體：大中小

來源：轉載

供稿：網友

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

rel="#十六進制顏色-#十六進制顏色"

少一個或多一個字符都不行。

<!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> <script type="text/javascript" src="clip.js"></script> <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="iwvjtn8m0"   class="code"> 首先在HTML頁面中引入clip.js，然后給需要漸變效果的HTML元素（比如SPAN）添加name屬性和rel屬性，格式如下： <div   id="iwvjtn8m0"   class="box">     <span name="clip:g" rel="#00ffff-#000000">藍黑漸變文字</span> </div> <ol class="box">     <li>name屬性作為漸變標示，name值不正確，將不會產生效果；</li>     <li>rel值提供頭和尾的顏色，以16進制顏色代碼為準，格式為"起始顏色-末端顏色"，其他格式不予支持。格式不正確將不產生效果。</li>     <li>最后需要在頁面上加上clip.gradient().init({t:["SPAN","A"]});這段代碼生成漸變色。</li> </ol> <p> 演示：<span name="clip:g" rel="#00ffff-#000000">藍黑漸變文字</span>  這是一段文字，我們可以隨意挑選幾個字做<span name="clip:g" rel="#ff008f-#00ff00">漸變效果</span>，字體的樣式<span name="clip:g" rel="#cc0000-#00ffff">隨頁面的全局樣式變化</span>，和本JS無關，這里用黑體可以看的更仔細。 </p> <div   id="iwvjtn8m0"   class="box">由紅轉灰的漸變鏈接：<a  name="clip:g" rel="#ff0000-#666666">我是連接，用A標簽</a></div> </div> <address> Designed by Silence,轉載請注明出處  <a name="clip:g" rel="#ff0000-#0000ff"  title="文章地址">http://www.silentash.com/?id=110</a> </address> </div> <script type="text/javascript"> clip.gradient().init({t:["SPAN","A"]}); </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

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

這樣的一個效果的HTML代碼是這樣的：
字體的樣式

復制代碼代碼如下:

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

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

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

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

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

上一篇：JS 創建對象(常見的幾種方法)

下一篇：js Clip奇思妙想之多彩漸變字效果