封装了一个自动生成渐变字的JS类(clip)

网络编程 2024/10/1 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

你需要做的只是在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>  <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>  <h3><strong>CSS+js多彩渐变字使用说明</strong></h3>  首先在HTML页面中引入clip.js，然后给需要渐变效果的HTML元素（比如SPAN）添加name属性和rel属性，格式如下：      &lt;span name="clip:g" rel="#00ffff-#000000"&gt;蓝黑渐变文字&lt;/span&gt;  <ol class="box">     <li>name属性作为渐变标示，name值不正确，将不会产生效果；</li>     <li>rel值提供头和尾的颜色，以16进制颜色代码为准，格式为"起始颜色-末端颜色"，其他格式不予支持。格式不正确将不产生效果。</li>     <li>最后需要在页面上加上clip.gradient().init({t:["SPAN","A"]});这段代码生成渐变色。</li> </ol> <p> 演示：蓝黑渐变文字  这是一段文字，我们可以随意挑选几个字做渐变效果，字体的样式随页面的全局样式变化，和本JS无关，这里用黑体可以看的更仔细。 </p> 由红转灰的渐变链接：我是连接，用A标签   Designed by Silence,转载请注明出处  http://www.silentash.com/?id=110 </address>   </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的除外=.=!）

渐变字

标签：

渐变字

无为清净楼资源网 Design By www.qnjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无为清净楼资源网 Design By www.qnjia.com

评论“封装了一个自动生成渐变字的JS类(clip)”

暂无评论...

www.qnjia.com 无为清净楼资源网

139,976互联网资源

144,792高清电影

21,817无损音乐

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年10月01日

封装了一个自动生成渐变字的JS类(clip)

渐变字

JS 创建对象(常见的几种方法)

js Clip奇思妙想之多彩渐变字效果

评论“封装了一个自动生成渐变字的JS类(clip)”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接