JavaScript 颜色梯度和渐变效果第1/3页

所属分类: 网络编程 / JavaScript 阅读数: 557
收藏 0 赞 0 分享
程序说明
【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); }
)

而关键词大家都很熟悉,要转化却很麻烦,因为没有一定规律只能一个一个对应:
复制代码 代码如下:

var mapping = {"red":"#FF0000"};//略
color = mapping[color.toLowerCase()];
if(color){
return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],
function(x){ return parseInt(x, 16); }
)
}

在Create创建颜色集合程序中获得开始颜色和结束颜色的数据后,再根据Step(多少步)就可以获得步长了:
复制代码 代码如下:

startColor = this.GetColor(this.StartColor),
endColor = this.GetColor(this.EndColor),
stepR = (endColor[0] - startColor[0]) / this.Step,
stepG = (endColor[1] - startColor[1]) / this.Step,
stepB = (endColor[2] - startColor[2]) / this.Step;

再根据步长生成集合:
复制代码 代码如下:

for(var i = 0, n = this.Step, r = startColor[0], g = startColor[1], b = startColor[2]; i < n; i++){
colors.push([r, g, b]); r += stepR; g += stepG; b += stepB;
}
colors.push(endColor);

正确的颜色值是在0到255之间的,而且是不带小数的,所以最好修正一下:
复制代码 代码如下:

return Map(colors, function(x){ return Map(x, function(x){
return Math.min(Math.max(0, Math.floor(x)), 255);
});});

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多