加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > 正文

改造版:JavaScript 颜色梯度和渐变结果

发布时间:2018-08-21 07:35:54 所属栏目:创业 来源:站长网
导读:迩来看了Dean的Convert any colour value to hex in MSIE,终于办理了按照要害字获取颜色rgb值的题目。 !DOCTYPE htmlhtml xmlns=http://www.w3.org/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=gb2312 /title Java Script 颜

迩来看了Dean的“Convert any colour value to hex in MSIE”,终于办理了按照要害字获取颜色rgb值的题目。


提醒:可修改儿女码再运行!

上一版《JavaScript 颜色梯度和渐变结果》

措施声名

【ColorGrads颜色梯度】

措施ColorGrads的浸染是按照颜色荟萃和渐变级数天生颜色梯度荟萃。
渐变级数的意思是分几多步完成渐变。

网页计划中的颜色是用RGB色彩模式泛起的。
在这个模式中每种颜色可以用三个代表红(r)、绿(g)、蓝(b)的颜色值(0到255)来暗示。

从w3c的Colors部门看到尺度中颜色的暗示情势包罗:
要害字情势:
em { color: red }
RGB情势:
em { color: #f00 }
em { color: #ff0000 }
em { color: rgb(255, 0, 0) }
em { color: rgb(100%, 0%, 0%) }
以上都是暗示统一种颜色(赤色)。
要害字情势就是用要害字代表颜色值。
而RGB情势,前两种用的较量多,都是一个"#"后头带16进制暗示的颜色值,第三种是用十进制的颜色值,第四种是现实值跟255的百分比情势。

各个赏识器对各类颜色暗示情势的获取并不沟通:
"color: red"情势:
  ie opera ff chrome/safari
style red red #ff0000 red
currentStyle red "red"     
getComputedStyle   #ff0000 rgb(255, 0, 0) rgb(255, 0, 0)
"color: #ff0000"/"color: #f00"情势:
  ie opera ff chrome/safari
style #ff0000/#f00 #ff0000 rgb(255, 0, 0) rgb(255, 0, 0)
currentStyle #ff0000/#f00 #ff0000     
getComputedStyle   #ff0000 rgb(255, 0, 0) rgb(255, 0, 0)
"color: rgb(255, 0, 0)"/"color: rgb(100%, 0%, 0%)"情势:
  ie opera ff chrome/safari
style rgb(255,0,0) #ff0000 rgb(255, 0, 0) rgb(255, 0, 0)
currentStyle rgb(255,0,0) #ff0000     
getComputedStyle   #ff0000 rgb(255, 0, 0) rgb(255, 0, 0)

根基上获得的置魅照旧按尺度的情势表现的,只是有些会自动转换情势。
不外ie的rgb情势跟ff/chrome/safari的差异,数值之间并没有空格。
要出格留意的是opera用currentStyle获取要害字情势获得的颜色值是带双引号的,异常稀疏,要只管停止行使。

要获取两种颜色的渐变梯度,先要把颜色转化成能用来计较的数值。
GetColor和GetData措施就是用来把切合w3c尺度暗示的颜色值转化成组合该颜色的红(r)、绿(g)、蓝(b)的颜色数值。
RGB情势的值自己就已经带了rgb的详细数值,只要用正则把值提取出来再转化就可以了。
这个进程在GetData中举办:
function GetData(color) {
       var re = RegExp;
       if (/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.test(color)) {
              //#rrggbb
              return $$A.map([ re.$1, re.$2, re.$3 ], function(x){
                            return parseInt(x, 16);
                     });
       } else if (/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.test(color)) {
              //#rgb
              return $$A.map([ re.$1, re.$2, re.$3 ], function(x){
                            return parseInt(x + x, 16);
                     });
       } else if (/^rgb((.*),(.*),(.*))$/i.test(color)) {
              //rgb(n,n,n) or rgb(n%,n%,n%)
              return $$A.map([ re.$1, re.$2, re.$3 ], function(x){
                            return x.indexOf("%") > 0 ? parseFloat(x, 10) * 2.55 : x | 0;
                     });
       }
}

留意#rrggbb/#rgb情势获得的是16进制的数值字符,把parseInt的第二个参数设为16就可以指定用16进制来处理赏罚字符串转换。
对付rgb(n,n,n)/rgb(n%,n%,n%)的情势,直接取得数值,假若有%就按照百分比计较对应数值就行了。
行使这种情势配置颜色时也要留意,
ie6和ie7应承数字百分比混用,其他不行以(包罗ie8);
ie6和ie7可以用空格或逗号脱离数值,其他必需用逗号(包罗ie8);
虽然我们行使时也应该是凭证w3c的尺度来配置了。
ps:谁人DHTML 手册上写的 EM { color: rgb 1.0 0.0 0.0 } 是不能用的,不要被误导了。

假如是要害字情势那就要其它想要领了,可以用一个字典工具来匹配颜色值,但这样措施会变得很复杂。
ps:可以到这里看全部颜色名对应的数值。
迩来dean颁发了“Convert any colour value to hex in MSIE”,终于办理了这个困难。
个中的要害是操作queryCommandValue("ForeColor")来获取颜色值(或者做过编辑器的会较量认识)。
queryCommandValue的浸染是返回document、range或current selection对付给定数令的当前值。
而ForeColor呼吁是配置或获取文本时的远景致。

详细的做法是先建设一个textarea:
if (!frag) {
       frag = document.createElement("textarea");
       frag.style.display = "none";
       document.body.insertBefore(frag, document.body.childNodes[0]);
};
然后配置color为要取值的颜色:
try { frag.style.color = color; } catch(e) { return [0, 0, 0]; }
在ie假如配置错误的颜色值会报错,以是这里用try...catch来担保能返回值。

能行使queryCommandValue的包罗document、range和current selection。
用createTextRange就可以成立一个range:
color = frag.createTextRange().queryCommandValue("ForeColor");

createTextRange可以用在Body,Button,Input和TextArea。
在dean的要领中是用createPopup().document.body的,甜头是不消插入元素到dom。
但createPopup是ie的要领,而TextArea还可以用于getComputedStyle,后头会用到。

这样获得的颜色值是一个数值,这个数字跟颜色的相关是这样的:
譬喻赤色的16进制rgb是ff0000,先转成bgr,即0000ff,然后转成10进制,获得255。
同样粉赤色pink是FFC0CB,转成bgr是CBC0FF,10进制是13353215。
ps:行使时要留意queryCommandValue("ForeColor")获得的颜色是bgr分列的,跟一样平常的纷歧样。

要获得rgb的值可以把转换进程倒过来获取,不外参考dean的文章有更奇妙的要领:
ret = [ color & 0x0000ff, (color & 0x00ff00) >>> 8, (color & 0xff0000) >>> 16 ];
先用与操纵(&)把对应位的数值取出来,再用右移运算符(>>>)把数值移到正确的位置上。

譬喻粉赤色FFC0CB要取得绿(g)的颜色值,用与操纵(&)取得对应值,FFC0CB & 0x00ff00获得C000,然后右移8个数位获得C0(16进制的一位相等于二进制的4位),即192。

其他支持document.defaultView的可以直接用getComputedStyle获取color。
从上面各个赏识器获取颜色值的功效可知获取的值都是RGB情势的值,以是可以直接用GetData转换:
ret = GetData(document.defaultView.getComputedStyle(frag, null).color);
留意除了ff,假如元素没有插入dom,用getComputedStyle是获取不了color的,以是元素建设时要趁便插入到body中。

在GetStep用GetColor得到颜色值之后,再按照step就可以得到步长了:
var colors = [], start = GetColor(start), end = GetColor(end),
       stepR = (end[0] - start[0]) / step,
       stepG = (end[1] - start[1]) / step,
       stepB = (end[2] - start[2]) / step;
再按照步永天生荟萃:
for(var i = 0, r = start[0], g = start[1], b = start[2]; i < step; i++){
       colors[i] = [r, g, b]; r += stepR; g += stepG; b += stepB;
}
colors[i] = end;
正确的颜色值是在0到255之间的,并且是不带小数的,必要批改一下:
return $$A.map(colors, function(x){ return $$A.map(x, function(x){
       return Math.min(Math.max(0, Math.floor(x)), 255);
});});

措施支持配置多个颜色的持续调动:
for(var i = 0, n = len - 1; i < n; i++){
       var steps = GetStep( colors[i], colors[i+1], step );
       i < n - 1 && steps.pop();
       ret = ret.concat(steps);
}
留意的是各次调动之间要去掉一再的颜色(steps.pop())。

【ColorTrans颜色渐变】

有了颜色梯度荟萃,只必要设个按时器把荟萃的值依次表现就是一个渐变结果了。
这个渐变有两种结果:颜色渐入(transIn)和颜色渐出(transOut)。
道理就是通过改变_index荟萃索引属性,渐入时逐渐变大,渐出时逐渐变小:
  transIn: function() {
       this.stop(); this._index++; this._set();
       if(this._index < this._colors.length - 1){
              this._timer = setTimeout($$F.bind( this.transIn, this ), this.speed);
       }
  },
  transOut: function() {
       this.stop(); this._index--; this._set();
       if(this._index > 0){
              this._timer = setTimeout($$F.bind( this.transOut, this ), this.speed);
       }
  },

在_set配置样式措施中修改样式:
var color = this._colors[Math.min(Math.max(0, this._index), this._colors.length - 1)];
this._elem.style[this.style] = "rgb(" + color.join(",") + ")";
个中style属性是要修改的样式属性名,譬喻颜色是"color",配景致是"backgroundColor"。

因为颜色荟萃是按照开始颜色、竣事颜色和步数天生的,以是假如要修改这些属性必需从头天生过荟萃。
reset措施就是用来从头天生荟萃的,同时索引也会设回0:
this._options = options = $$.extend(this._options, options || {});
this._colors = ColorGrads( [options.from, options.to], options.step );
this._index = 0;

措施初始化的时辰也会reset一次:
this.reset({
       from: this.options.from || $$D.getStyle(this._elem, this.style),
       to: this.options.to,
       step: Math.abs(this.options.step)
});
假如没有自界说from颜色的话会自动获取当前颜色。

行使能力

链接标签a的伪类的颜色暂且没有步伐直接用dom来修改(除非改class)。
以是在颜色渐变菜单顶用了个小能力,把a的内容和跳转换到td的innerHTML和onclick上实现:
var a = x.getElementsByTagName("a")[0], href = a.href, txt = a.innerHTML;
x.onclick = function(){ location.href = href; }
x.innerHTML = txt;
这样就可以在不影响可用性的环境下实现结果。

在测试进程中还发明一个数组的题目,运行alert([,,].length),在ie会返回3,其他会返回2。
在mozilla的Array_Literals部门查到:
If you include a trailing comma at the end of the list of elements, the comma is ignored.
即假如数组字面量元素荟萃的最后是逗号,逗号会被忽略掉。

行使声名

ColorGrads的第一个参数是颜色荟萃,第二个参数是渐变级数。

ColorTrans只要一个参数,要实现渐变的工具,可配置以部属性:
from:       "",//开始颜色
to:       "#000",//竣事颜色
step:       20,//渐变级数
speed:       20,//渐变速率
style:       "color"//配置属性(Scripting属性)
from默认是空值,利便判定自动获取。
个中from、to和step在实例化后要修改的话必要用reset来配置。
详细行使请参考实例。

(编辑:湖南网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读