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

之前用Clip属性实现了文字上下两半不同色彩的拼接。
多彩渐变字，兼容所有主流浏览器。
页面JS当中真正有用的只有colorful()函数：


代码如下:

function colorful(obj,font,r,g,b,type){
var boxObj;
if(typeof(obj)=="string"||typeof(obj)=="number"){
boxObj = document.getElementById(obj);
}else{
boxObj = obj;
}
boxObj.innerHTML="<a href='#'>"+font+"</a>";
var num = boxObj.getElementsByTagName("a")[0].scrollWidth;
boxObj.innerHTML="";
for(var i=0;i<=num;i++){
var j=i+1;
var c=Math.round(255/num*i);
switch(Number(type)){
case 0:r=c;g=c;b=c;break;
case 1:r=c;break;
case 2:g=c;break;
case 3:b=c;break;
}
var iObj = document.createElement("A");
iObj.innerHTML=font;
iObj.style.clip="rect(auto "+j+"px auto "+i+"px)";
iObj.style.color="rgb("+r+","+g+","+b+")";
iObj.href="#";
boxObj.appendChild(iObj);
}
}

CLIP实现色彩渐变字体

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;}
.box{position:relative;background-color:#fff;width:auto;margin:0 auto;padding:0 30px;font:700 20px/1.5 "黑体",arial;border:1px dashed #f60;height:30px;margin-top:8px;}
.box a{position:absolute;font-style:normal;white-space:nowrap;}
.f999{color:#999;}
a:link{text-decoration:none;}
a:hover{text-decoration:underline;}
a:visited{text-decoration:none;}
address{background-color:#f1f1f1;border:1px dashed #ddd;padding:10px;font-style:normal;color:#999;}
address a,address a:visited{color:#c00;}

CSS多彩渐变字

文字：
R值： 初始化RGB颜色中的R值
G值： 初始化RGB颜色中的G值
B值： 初始化RGB颜色中的B值
渐变方式： 灰度渐变变化R值变化G值变化B值
相应的数值会强制在0~255之间变化

渐变着色

Designed by Silence,转载请注明出处

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

var rs = document.getElementById("rvalue");
var gs = document.getElementById("gvalue");
var bs = document.getElementById("bvalue");
function init(){
var str;
for(var i=0;i"+font+"";
var num = boxObj.getElementsByTagName("a")[0].scrollWidth;
boxObj.innerHTML="";
for(var i=0;i

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

虽然IE有自己的渐变滤镜，但其他浏览器都不支持。CLIP属性的应用可以支持所有浏览器！通过程序，我们可以轻松地给每个文字副本添加CLIP属性将一段文字分割成一个一个像素，分别着色，最后组合到一起，实现多彩渐变！

赞 (0)

相关推荐

  • 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代码

    利用递增的数字返回循环渐变的颜色的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和css实现渐变色包括静态渐变和动态渐变

    纯js和css实现渐变色包括静态渐变和动态渐变

    说起"渐变色",你会想起什么? 当我开始搜索查找这个名词的时候,才发现它实际上是有两种理解或者说是两种形式的:动态渐变和静态渐变. 所谓动态渐变,举个简单的例子:他来了,她的脸渐渐红了...渐渐的,渐渐改变的,是不断在改变的:而静态渐变,也就更简单了:天上一到彩虹,赤橙黄绿青蓝紫啊...在当前展示的成品中,颜色从一部分到另一部分的颜色是不一样的,可能幅度比较小,是逐渐改变的,但有一点是至关重要的,它已经存在了,形成了变化的现状且无法再改变. 这样我们先来用javascript实现一下所

  • 封装了一个自动生成渐变字的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

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

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

  • JS Tween 颜色渐变

    JS Tween 颜色渐变

    有31中缓动算法,实现了颜色的自动转换(#f00 #ff0000 rgb(255,0,0)格式到颜色运算格式,最后返回#ff0000格式).px单位的自动转换. 调用接口: /** * 对外接口 * Tween的示例 * @param startProps 开始属性,单个属性或者数组 * @param endProps 结束属性,单个属性或者数组 * @param timeSeconds 运动消耗时间,单位秒 * @param animType 动作类型,字符串型,内部自己转换算子 * @par

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

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

  • 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奇思妙想之多彩渐变字效果

    之前用Clip属性实现了文字上下两半不同色彩的拼接.多彩渐变字,兼容所有主流浏览器.页面JS当中真正有用的只有colorful()函数: 复制代码 代码如下: function colorful(obj,font,r,g,b,type){ var boxObj; if(typeof(obj)=="string"||typeof(obj)=="number"){ boxObj = document.getElementById(obj); }else{ boxObj

  • js Clip的奇思妙想之文字拼接效果

    那么有人就问了,什么CSS做的效果既奇妙又实用的呢?Clip,对,就是css里的clip属性,被多数人忽略的属性: 语法: clip : auto | rect ( number number number number ) 参数: auto : 对象无剪切 rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换,即此边不剪切 . 需要注意的是 1.clip属性一定要

  • js实现按钮颜色渐变动画效果

    js实现按钮颜色渐变动画效果

    本文实例讲述了js实现按钮颜色渐变动画效果的方法.分享给大家供大家参考.具体如下: 这里演示js实现按钮慢慢变色的方法,鼠标移到按钮上,按钮的背景色就发生变化,是慢慢的变化,点击按钮会打开指定链接,这里主要是演示按钮变色的代码实现方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-button-cha-color-animate-codes/ 具体代码如下: <HTML><HEAD><TITLE>按钮慢慢变色&

  • JS实现点击登录弹出窗口同时背景色渐变动画效果

    本文实例讲述了JS实现点击登录弹出窗口同时背景色渐变动画效果.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <STYLE> #login{ position: relative; display: none;

  • JS实现的透明度渐变动画效果示例

    JS实现的透明度渐变动画效果示例

    本文实例讲述了JS实现的透明度渐变动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS透明度变化效果</title> <style> body{ margin: 0px; padding: 0px; } .redb{ width:200px; height: 20

  • JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)

    JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)

    本文实例讲述了JS+CSS实现的漂亮渐变背景特效代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title> JS配合CSS实现的漂亮渐变背景特效6个实例 </title> <script> var setGradient = (function() { var p_dCanvas = document.createElement('canvas'); var p_useCanvas =

  • jQuery实现的背景颜色渐变动画效果示例

    本文实例讲述了jQuery实现的背景颜色渐变动画效果.分享给大家供大家参考,具体如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" c

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

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

随机推荐