JavaScript 颜色梯度和渐变效果

简介：很久没写blog，太忙了。没什么时间写复杂的东西，重新把颜色渐变效果写一遍。关于颜色的效果一般就两个，颜色梯度变化和样式的颜色渐变，前者在ie中一般用滤镜实现。实例效果预览效果1：这是一个颜色梯度变化演示：运行代码框 !DOCTYPE html public -//W3C//DTD X

很久没写blog，太忙了。没什么时间写复杂的东西，重新把颜色渐变效果写一遍。
关于颜色的效果一般就两个，颜色梯度变化和样式的颜色渐变，前者在ie中一般用滤镜实现。

实例效果

预览效果1：

这是一个颜色梯度变化演示：

运行代码框

[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]

预览效果2：

一个颜色渐变的菜单：

运行代码框

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head id="Head"><title> JavaScript 颜色梯度和渐变效果 </title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta id="metaKeywords" name="keywords" content="渐变,颜色,color,梯度,Grads,JavaScript 颜色梯度和渐变效果" /><meta name="description" content="很久没写blog，太忙了。没什么时间写复杂的东西，重新把颜色渐变效果写一遍。关于颜色的效果一般就两个，颜色梯度变化和样式的颜色渐变，前者在ie中一般用滤镜实现。实例效果0?parseFloat(x,10)*2.55:x,10);} ) } else" /><meta name="description" content="ASP.NET,JavaScript,js,cloudgamer,web,html,css,特效,代码,效果" /><link id="CommondCss" type="text/css" rel="stylesheet" href="http://www.cnblogs.com/css/common.css" /><link id="CommondCss2" type="text/css" rel="stylesheet" href="http://www.cnblogs.com/css/common2.css" /><link type="text/css" rel="stylesheet" href="http://common.cnblogs.com/css/shCore.css" /><link type="text/css" rel="stylesheet" href="http://common.cnblogs.com/css/shThemeDefault.css" /><link id="SecondaryCss" type="text/css" rel="stylesheet" href="http://www.cnblogs.com/cloudgamer/customcss.aspx" /><link id="RSSLink" title="RSS" type="application/rss+xml" rel="alternate" href="http://www.cnblogs.com/cloudgamer/rss" /><link id="RSDLink" title="RSD" type="application/rsd+xml" rel="EditURI" href="http://www.cnblogs.com/cloudgamer/rsd.xml" /> <script src="/Script/common.js" type="text/javascript"></script> </head> <body> <p> <script type="text/javascript"></script> </p> <p> <script type="text/javascript"></script> </p> <p><br />预览效果2：</p> <p>一个颜色渐变的菜单：</p> <p> <style type="text/css"></style> </p> <table border="0" width="600" cellpadding="0" cellspacing="5" id="idMenu"> <tbody> <tr> <td onclick="location.href='http://www.cnblogs.com/cloudgamer/archive/2008/07/21/ImgCropper.html'">Cropper</td> <td onclick="location.href='http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html'">Tween</td> <td onclick="location.href='http://www.cnblogs.com/cloudgamer/archive/2008/12/24/Slider.html'">Slider</td> <td onclick="location.href='http://www.cnblogs.com/cloudgamer/archive/2008/12/03/Resize.html'">Resize</td> <td onclick="location.href='http://www.cnblogs.com/cloudgamer/archive/2008/11/17/Drag.html'">Drag</td> </tr> </tbody> </table> <p> <script type="text/javascript"></script> </p> </body> </html>

[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]

预览效果3：

颜色渐变的有趣应用，点击随机颜色渐变：

运行代码框

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head id="Head"><title> JavaScript 颜色梯度和渐变效果 </title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta id="metaKeywords" name="keywords" content="渐变,颜色,color,梯度,Grads,JavaScript 颜色梯度和渐变效果" /><meta name="description" content="很久没写blog，太忙了。没什么时间写复杂的东西，重新把颜色渐变效果写一遍。关于颜色的效果一般就两个，颜色梯度变化和样式的颜色渐变，前者在ie中一般用滤镜实现。实例效果0?parseFloat(x,10)*2.55:x,10);} ) } else" /><meta name="description" content="ASP.NET,JavaScript,js,cloudgamer,web,html,css,特效,代码,效果" /><link id="CommondCss" type="text/css" rel="stylesheet" href="http://www.cnblogs.com/css/common.css" /><link id="CommondCss2" type="text/css" rel="stylesheet" href="http://www.cnblogs.com/css/common2.css" /><link type="text/css" rel="stylesheet" href="http://common.cnblogs.com/css/shCore.css" /><link type="text/css" rel="stylesheet" href="http://common.cnblogs.com/css/shThemeDefault.css" /><link id="SecondaryCss" type="text/css" rel="stylesheet" href="http://www.cnblogs.com/cloudgamer/customcss.aspx" /><link id="RSSLink" title="RSS" type="application/rss+xml" rel="alternate" href="http://www.cnblogs.com/cloudgamer/rss" /><link id="RSDLink" title="RSD" type="application/rsd+xml" rel="EditURI" href="http://www.cnblogs.com/cloudgamer/rsd.xml" /> <script src="/Script/common.js" type="text/javascript"></script> </head> <body> <p> <script type="text/javascript"></script> </p> <p><br />预览效果3：</p> <p>颜色渐变的有趣应用，点击随机颜色渐变：</p> <div style="padding:10px;color:#fff; background-color:#CCC;" id="idRandom">点击随机换颜色</div> <p> <script type="text/javascript"></script> </p> </body> </html>

[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]

【ColorGrads颜色梯度】

程序ColorGrads的作用是通过StartColor和EndColor生成颜色梯度集合。
颜色都可以用红(r)、绿(g)、蓝(b)三个颜色来表示。
程序中先通过GetColor把一般的颜色表示形式转化成一个用红(r)、绿(g)、蓝(b)三个颜色值作元素的集合。
那就首先要知道有什么颜色表示形式，从 w3c的Colors部分可以知道有以下形式：
关键词模式：

em { color: red }

RGB颜色模式：

em { color: #f00 }
em { color: #ff0000 }
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }

以上都是表示同一种颜色（红色）。
获取颜色属性的形式在ie和ff并不同，ff统一返回RGB颜色模式的第三种形式，ie则按照设置时的形式返回。

先说说RGB颜色模式，前两种比较常用应该都明白他们的区别吧，它用的是16进制表示形式，而我们想要10进制的。
把一个16进制表示的字符转成10进制数字，一般用parseInt，在substr截取字符之后就可以用parseInt转换。
对于#ff0000这个形式可以这样转换：

return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],
function(x){ return parseInt(x, 16); }
)

parseInt的第二个参数就是第一个参数的进制值。
对于#f00形式，跟上一个差不多，只是转换之前要先换成完整表示形式：

return Map([color.substr(1, 1), color.substr(2, 1), color.substr(3, 1)],
function(x){ return parseInt(x + x, 16); }
)

后面两种可能用的就比较少了，一个用10进制的rgb颜色值表示，另一个用百分比来表示。
ff严格按照那样的格式来表示，而ie就“放松”很多，例如：
ie可以允许数字百分比混用，ff不可以；
ff必须有逗号分隔，ie可以只用空格分隔；
当然我们使用时最好是按照w3c的标准来设置了。
ps：那个DHTML 手册上写的 EM { color: rgb 1.0 0.0 0.0 } 根本不能用的，不要被误导了。
对这个形式，程序用正则取得数值，如果有%就根据百分比计算出对应数值：

return Map(color.match(/\d+(\.\d+)?\%?/g),
function(x){ return parseInt(x.indexOf("%") > 0 ? parseFloat(x, 10) * 2.55 : x, 10); }
)

而关键词大家都很熟悉，要转化却很麻烦，因为没有一定规律只能一个一个对应：

文章共3页: [1] [2] [3]

更多的JavaScript 颜色梯度和渐变效果请到论坛查看: http://BBS.TC711.COM

【双击滚屏】【评论】【收藏】【打印】【关闭】来源：网页教学网日期：2009-5-29