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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 封装了一个自动生成渐变字的JS类(clip)

Javascript: 滚动条代码生成器; NiftyCube：轻松实现圆角边框; 懒就要懒到底：鼠标自动点击（含时间判断）; 简单form标准化实例：语义结构; 超清晰的document对象详解; 用正则获取指定路径文件的名称; 整理的比较不错的JavaScript的方法和技巧; 求得div 下 img的src地址的js代码; js+css实现的仿office2003界面; 一个不错的应用,用于提交获取文章内容，不推荐用; 插件：检测javascript的内存泄漏; 得到文本框选中的文字，动态插入文字的js代码; 翻译整理的jQuery使用查询手册; 一个的简易文本编辑器源码; HTML中不支持静态Expando的元素的问题; 用CSS打造多彩文字链接; 一个不错的用JavaScript实现的UBB编码函数; js实现的非常棒的绿色下拉透明菜单; 优秀js开源框架-jQuery使用手册(1); 学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例

No. « ‹ 193 194 195 196 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 283 ::

收藏到网摘: n/a

使用EXT实现无刷新动态调用股票信息用javascript修复浏览器中头痛问题的方法整理篇[译]

之前做过一个生成渐变字体的简单演示今天闲着没事就把这个功能完善了，把JS代码封装成一个类，载入页面就可以使相应的HTML元素内部的字体产生渐变色。你需要做的只是在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 class="code">
首先在HTML页面中引入clip.js，然后给需要渐变效果的HTML元素（比如SPAN）添加name属性和rel属性，格式如下：
<div 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>
演示：<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无关，这里用黑体可以看的更仔细。
<div class="box">由红转灰的渐变链接：<a href="http://www.silentash.com" name="clip:g" rel="#ff0000-#666666">我是连接，用A标签</a></div>
</div>
<address>
Designed by Silence,转载请注明出处
<a name="clip:g" rel="#ff0000-#0000ff" href="http://www.silentash.com?id=110" 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 全选提示:你可先修改部分代码,再按运行]

怎么样，效果很炫吧，嘿嘿！
/uploads/200811/clipg1.jpg

这样的一个效果的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的除外=.=!）

使用EXT实现无刷新动态调用股票信息用javascript修复浏览器中头痛问题的方法整理篇[译]

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

评论 (0) All

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