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

JavaScript 颜色梯度和渐变结果（上）

发布时间：2018-08-21 07:34:54 所属栏目：创业 来源：站长网
导读：猛火网(LieHuo.Net)教程 好久没写文章，太忙了。没什么时刻写伟大的对象，从头把颜色渐变结果写一遍。关于颜色的结果一样平常就两个，颜色梯度变革和样式的颜色渐变，前者在ie中一样平常用滤镜实现。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN

猛火网(LieHuo.Net)教程 好久没写文章，太忙了。没什么时刻写伟大的对象，从头把颜色渐变结果写一遍。关于颜色的结果一样平常就两个，颜色梯度变革和样式的颜色渐变，前者在ie中一样平常用滤镜实现。


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

措施声名

【ColorGrads颜色梯度】

措施ColorGrads的浸染是通过StartColor和EndColor天生颜色梯度荟萃。
颜色都可以用红(r)、绿(g)、蓝(b)三个颜色来暗示。
措施中先通过GetColor把一样平常的颜色暗示情势转化成一个用红(r)、绿(g)、蓝(b)三个颜色值作元素的荟萃。
那就起主要知道有什么颜色暗示情势，从w3c的Colors部门（http://www.w3.org/TR/CSS21/syndata.html#color-units）可以知道有以下情势：
要害词模式：
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);
});});


【ColorTrans颜色渐变】

有了颜色梯度荟萃，只必要设个按时器把荟萃的值依次表现就是一个渐变结果了。
这个渐变一样平常是分两个步调，别离是（FadeIn）和渐出（FadeOut）。
道理就是通过改变_index荟萃索引，渐入时逐渐变大，渐出时逐渐变小：
  //颜色渐入
  FadeIn: function() {
       this.Stop(); this._index++; this.SetColor();
       if(this._index < this._colors.length - 1){
              this._timer = setTimeout(Bind(this, this.FadeIn), this.Speed);
       }
  },
  //颜色渐出
  FadeOut: function() {
       this.Stop(); this._index--; this.SetColor();
       if(this._index > 0){
              this._timer = setTimeout(Bind(this, this.FadeOut), this.Speed);
       }
  },
在SetColor配置样式措施中，通过CssColor来配置要修改的样式属性，譬喻字体颜色是"color"，配景致是"backgroundColor"：
var color = this._colors[Math.min(Math.max(0, this._index), this._colors.length - 1)];
this._obj.style[this.CssColor] = "rgb(" + color[0] + "," + color[1] + "," + color[2] + ")";

因为颜色荟萃是按照开始颜色、竣事颜色和步数天生的，以是假如要修改这些属性必需从头天生过荟萃。
Reset措施就是用来修改这些属性并从头天生荟萃的，荟萃从头天生后索引也要设回0：
//修改颜色后必需从头获取颜色荟萃
color = Extend({ StartColor: this._startColor, EndColor: this._endColor, Step: this._step }, color || {});
//配置属性
this._grads.StartColor = this._startColor = color.StartColor;
this._grads.EndColor = this._endColor = color.EndColor;
this._grads.Step = this._step = color.Step;
//获取颜色荟萃
this._colors = this._grads.Create();
this._index = 0;

行使能力

在颜色渐变菜单中，并没有行使链接标签a，缘故起因是a的伪类的颜色并不能直接用js来修改（除非改class）。
暂且没想到很好的要领，只好用onclick跳转取代了。

在测试进程中还发明一个关于数组的题目，在ie和ff运行alert([,,].length)会别离表现3和2。
最后一个元素不写的话ff就会忽略这个元素，只要写的话就不会忽略纵然是undefined和null，看了下文档也找到缘故起因。
以是这个环境照旧插一个对象进去，认为欠悦目就new Array好了。

测试中还发明chrome(1.0.154.48)的map一个题目，map是js1.6的Array的要领，ff和chrome都支持（详细看这里）。
在ff中[,,1].map(function(){return 0})返回的是[0,0,0]，但chrome却返回[,,0]。
即在chrome中假如元素是空(不包罗null和undefined)的话就一致返回空，用new Array来建设也一样。
感受这样不太公道，应该往后会改造吧。

行使声名

ColorGrads只有3个属性配置：
StartColor:       "#fff",//开始颜色
EndColor:       "#000",//竣事颜色
Step:              20//渐变级数
配置好属性后用Create天生荟萃就行了。

ColorTrans只要一个参数，要实现渐变的工具，可配置以部属性：
StartColor:       "",//开始颜色
EndColor:       "#000",//竣事颜色
Step:              20,//渐变级数
Speed:              20,//渐变速率
CssColor:       "color"//配置属性（Scripting属性）
假如不配置StartColor会自动行使CurrentStyle获取的样式值。
个中StartColor、EndColor和Step在实例化后要从头配置的话必要用Reset来配置。

详细行使请参考实例。文章来自：http://www.cnblogs.com/cloudgamer/

（编辑：湖南网）

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

        【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

        建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

        Copygight © 2008-2022 https://www.hunanwang.cn/ All Rights Reserved. 湖南网