封装了一个自动生成渐变字的JS类(clip)
2008-11-02 00:22
459 查看
你需要做的只是在HTML页面里面把需要用到渐变色的文字加上外容器(span标签或者a标签都可以),再给这个标签加入name属性做渐变元素的标示,rel属性指示渐变的颜色,rel属性的格式很重要:
复制代码 代码如下:
rel="#十六进制颜色-#十六进制颜色"
少一个或多一个字符都不行。
CSS+JS多彩渐变字 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;}
[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的除外=.=!)
复制代码 代码如下:
rel="#十六进制颜色-#十六进制颜色"
少一个或多一个字符都不行。
CSS+JS多彩渐变字 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;}
CSS+js多彩渐变字使用说明
首先在HTML页面中引入clip.js,然后给需要渐变效果的HTML元素(比如SPAN)添加name属性和rel属性,格式如下: <span name="clip:g" rel="#00ffff-#000000">蓝黑渐变文字</span>- name属性作为渐变标示,name值不正确,将不会产生效果;
- rel值提供头和尾的颜色,以16进制颜色代码为准,格式为"起始颜色-末端颜色",其他格式不予支持。格式不正确将不产生效果。
- 最后需要在页面上加上clip.gradient().init({t:["SPAN","A"]});这段代码生成渐变色。
演示:蓝黑渐变文字 这是一段文字,我们可以随意挑选几个字做渐变效果,字体的样式随页面的全局样式变化,和本JS无关,这里用黑体可以看的更仔细。
由红转灰的渐变链接:我是连接,用A标签 Designed by Silence,转载请注明出处 http://www.silentash.com/?id=110[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类(clip)
- 一个AJAX自动完成功能的js封装源码[支持中文]第1/2页
- 用js实现的一个根据内容自动生成表格的函数
- 在aspx中的Controls编译过后自动生成了一个新的ID,而之前写js脚本用的ID,肯定是running不了
- 用js实现的一个根据内容自动生成表格的函数
- 一个可以自动生成CSS样式前缀的脚本---Prefixfree.js
- 一个AJAX自动完成功能的js封装源码[支持中文]第1/2页
- js自动生成的元素与页面原有元素发生堆叠的解决方法
- js方法随机生成一个流水号
- 博客园博客自动生成三级目录(generate three levels content using JS in cnblogs)
- 如何预置一个默认的Email account,第一次开机时就自动生成?
- SPORE,一个很好的实现JS命名空间的管理,模块的定义,与自动加载依赖模块的脚本文件
- 自己封装的一个原生JS拖动方法(推荐)
- Soy文件生成JS文件 - 一个使用Google soy模板的例子
- 用js写一个图片渐变切换效果
- node.js项目中基于mysql利用sequelize-auto对照数据库自动生成相应的models
- 数据库事务提交方法和怎样拿到一个insert语句中自动生成的值
- js随机生成一个数组中的随机字符串以及更新验证码
- js实现同一个页面多个渐变效果的方法
- 每小时自动生成一个SQL Server Profiler文件(Auto Generate an Hourly SQL Server Profiler Trace File)