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

你需要做的只是在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;}

CSS+js多彩渐变字使用说明

首先在HTML页面中引入clip.js，然后给需要渐变效果的HTML元素（比如SPAN）添加name属性和rel属性，格式如下：

<span name="clip:g" rel="#00ffff-#000000">蓝黑渐变文字</span>

  1. name属性作为渐变标示，name值不正确，将不会产生效果；
  2. rel值提供头和尾的颜色，以16进制颜色代码为准，格式为"起始颜色-末端颜色"，其他格式不予支持。格式不正确将不产生效果。
  3. 最后需要在页面上加上clip.gradient().init({t:["SPAN","A"]});这段代码生成渐变色。

演示：蓝黑渐变文字

这是一段文字，我们可以随意挑选几个字做渐变效果，字体的样式随页面的全局样式变化，和本JS无关，这里用黑体可以看的更仔细。

由红转灰的渐变链接：我是连接，用A标签

Designed by Silence,转载请注明出处

http://www.silentash.com/?id=110

clip.gradient().init({t:["SPAN","A"]});

[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的除外=.=!）

赞 (0)

相关推荐

  • 用js实现层随着内容大小动态渐变改变 推荐

    下面我们就自己来实现一个这样的组件,没有参考其他资料,纯属自己瞎写. 我觉得我这个方法很简单了,只需要在外边多套一个层就可以,而且可以容纳大量的文字(为什么这样说?因为如果只是单纯的图片,那调整起来简单多了,而如果有一大串文字的话,要变换两次才可以,因为如果你改变了宽度的话,字会被挤得高度增加,这里有两个方法来调整,一个是每次动画循环都更新最新的高和宽,另一种方法就是先变换,变换完后再检查一次,这次变化的只是高度,也就是调节两次,第一种方法效果好,但是每次都更新,自然加重了负担,第二种效果差点,

  • 利用递增的数字返回循环渐变的颜色的js代码

    利用递增的数字返回循环渐变的颜色的js代码

    函数如下: 复制代码 代码如下: function gCL(i){ var f=parseInt((i%15)/5); i=i%15%5; switch(f){ case 0:return "#"+cS2(255-i*51)+cS2(i*51)+"00"; case 1:return "#00"+cS2(255-i*51)+cS2(i*51); case 2:return "#"+cS2(i*51)+"00"

  • JS实现进入页面时渐变背景色的方法

    本文实例讲述了JS实现进入页面时渐变背景色的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>JS实现的进入页面时的渐变的背景色效果</title> <SCRIPT Language="JavaScript"> <!-- 屏幕变色程序 --> function CBgColor(){ var color = 0, step = 1 //color为初始颜色,step为初始步长

  • JS+CSS实现感应鼠标渐变显示DIV层的方法

    本文实例讲述了JS+CSS实现感应鼠标渐变显示DIV层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/

  • js实现类似光照的炫彩文字渐变视觉冲击效果

    炫彩的文字效果 body,div,td{font:menu} 欢迎使用 Internet 信息服务! Microsoft Internet 信息服务是一个桌面 Web 服务器,使用它,您可以从自己的计算机上发布个人主页,并把您计算机上的文档共享到整个网络. 在将站点上载到 Internet 提供商之前,也可以将 IIS 用作开发平台. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js实现同一个页面多个渐变效果的方法

    本文实例讲述了js实现同一个页面多个渐变效果的方法.分享给大家供大家参考.具体分析如下: 这里可实现5个元素中随便一个,鼠标移上去透明度渐渐增加,鼠标移出,透明度渐渐减小的效果. 要点一: var speed = 0; if(target>obj.alpha){ speed = 5; }else{ speed = -5; } 根据目标值和当时值的对比,来决定是正向还是负向速度. 要点二: for(i=0; i<runs_li.length; i++){ runs_li[i].timer = n

  • js渐变显示渐变消失示例代码

    以下是渐变的js代码(表示多余三行的要隐藏,点击"more"显示剩下的,点击"less"要逐渐隐藏): 复制代码 代码如下: function showAccomplishmentTableRow(){ $("#accomplishmenttable tr:hidden").first().show(2000,function(){ showAccomplishmentTableRow(); }); if($("#accomplishm

  • js实现图片从左往右渐变切换效果的方法

    本文实例讲述了js实现图片从左往右渐变切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <style type="text/css"> .woon{border:1px solid #fff;} .wooff{border:1px solid #ffffff;filter:progid:DXImagetransform.Microsoft.Alpha(style=1,opacity=1500,finishOpacity=1);} </st

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

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

    你需要做的只是在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 dash

  • Mybatis如何自动生成数据库表的实体类

    Mybatis如何自动生成数据库表的实体类

    第一步引入jar 第二步,配置文本文件 # 数据库驱动jar 路径 本地创库的包 drive.class.path=C:/Users/Administrator/.m2/repository/mysql/mysql-connector-java/5.1.30/mysql-connector-java-5.1.30.jar # 数据库连接参数 jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://192.168.1.188:3306/sxh

  • 一个很酷的拖动层的js类，兼容IE及Firefox

    自己优化修改了网上的一个JS拖动类,增加了拖动时显示半透明的特效. http://www.jb51.net/article/16122.htm注意,本文类中的Cminfo类请 查看:http://www.jb51.net/article/18760.htm 复制代码 代码如下: //*********************************移动层 函数 开始******************************************* //生成拖动层很简单,只需要(参数之一如果是

  • 利用node.js实现自动生成前端项目组件的方法详解

    利用node.js实现自动生成前端项目组件的方法详解

    本文主要给大家介绍了关于利用node.js实现自动生成前端项目组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 脚本编写背景 写这个小脚本的初衷是,项目本身添加一个组件太繁琐了,比如我想要去建立一个login的组件,那么我需要手动去IDE中,创建index.js(组件出口文件),login.js(业务文件),login.html,login.less这四个文件.因为每个组件都有一些输出的代码,还要把之前组件的那几行拷贝过来,这种作业真的烦,于是乎写了一个小脚本去自动

  • Java中自动生成构造方法详解

    Java中自动生成构造方法详解 每个类在没有声明构造方法的前提下,会自动生成一个不带参数的构造方法,如果类一但声明有构造方法,就不会产生了.证明如下: 例1: class person { person(){System.out.println("父类-person");} person(int z){} } class student extends person { // student(int x ,int y){super(8);} } class Rt { public st

  • js自动生成对象的属性示例代码

    例如 我们有如下这么一个对象 复制代码 代码如下: var obj = { a:{ b:"bb" } } 但是我们现在想给 obj 对象增加如下属性 obj.a.b.c.d.f="ff" ; 我们一般会如下做,obj.a.b.c={},obj.a.b.c.d={} ,obj.a.b.c.d.f="ff" ;但是如果我的属性很多,这样的方法时不可行的.现在提供一个自动生成对象属性的方法 复制代码 代码如下: function autoCreateO

  • iOS进阶之xib上控件自动生成纯代码

    iOS进阶之xib上控件自动生成纯代码

    最近公司写了一新项目,写完项目总结时发现,大部分时间都浪费在纯代码写一些简单的控件上,用xib布局吧,还怕为后期的维护给自己挖坑,总是纠结到底用纯代码,还是xib呢,纠结来纠结去突然灵感乍现? 为什么不能用xib布局,让它自动生成相应的代码呢,安卓就有这类似的功能- -!!想到就着手开干,写了一个自动生成的工具,废话不多说介绍下我自己写的小工具 因为还不成熟,就先不发布到cocoapods 了,就一个动态库,直接拖进工程即可,有兴趣的小伙伴可以到网盘下载体验一下 demo下载地址 下面介绍下怎么

  • nginx在docker容器中自动生成配置文件

    公司在搭建docker自动化部署时,需要制作一个nginx镜像在其docker run时通过外部指定环境变量使得容器中的配置文件自动生成,不需要再到容器里改配置文件. 实现思路 最后运行的命令大概是这样: docker run -d -p 80:80 -e xxx=xx 镜像名称 镜像中脚本路径 这里的脚本会代替dockerfile中的CMD指令,所以我们要构建一个自动生成且启动nginx的shell脚本. #!/bin/bash #从环境变量里面获取lt开头,为了与其他环境变量区别开,例如lt

  • Python利用sqlacodegen自动生成ORM实体类示例

    本文实例讲述了Python利用sqlacodegen自动生成ORM实体类.分享给大家供大家参考,具体如下: 在前面一篇<Python流行ORM框架sqlalchemy安装与使用>我们是手动创建了一个名叫Infos.py的文件,然后定义了一个News类,把这个类作为和我们news数据表的映射. from sqlalchemy.ext.declarative import declarative_base Base = declarative_base() from sqlalchemy impo

  • mybatis-generator自动生成dao、mapping、bean配置操作

    我就废话不多说了,大家还是直接看代码吧~ <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generatorConfiguration PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN" "http://mybatis.org/dtd/mybatis-generator-config_

随机推荐