JavaScript 颜色梯度和渐变效果（2）
作者：cloudgamer 来源：cloudgamer博客 发布时间：2009-03-18 11:16:00
【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;
0
投稿猜你喜欢
- Python2 和 Python3 是不兼容的，如果碰到无法升级到 Python2 代码，或者同事中有坚守 Python2 阵营的情况，就要
- 我就废话不多说了，大家还是直接看代码吧！def iou(y_true, y_pred, label: int): "&
平时工作过程中，git在push代码的时候有时会遇到如下的错误错误原因文件冲突，本地的代码和远程Repository中的文件个数不一致（即远- 前言最近由于换工作，开始交接工作。整理以前的工作内容，由于组内就我一个在做go和大数据。 所以开发没有规划，当时是怎么快怎么来。go也是使用
- 首先是最常规的方法：<p id="para" title="cssrain demo!" on
- 虽然并非你编写的每个 Python 程序都要求一个严格的性能分析，但是让人放心的是，当问题发生的时候，Python 生态圈有各种各样的工具可
- 前言关于 var、let 和 const 三个关键字的区别，是一个老生常谈的问题，也是经典的面试题。本篇文章将全面讲解三者的特性，以及它们之
- 上一篇我们写了怎么将xmind转换成想要的excel格式，这篇再讲一下用Python自带的tkinter库设计一个简单的gui界面，让我们的
- 【OpenCV】⚠️高手勿入! 半小时学会基本操作⚠️色彩空间概述OpenCV 是一个跨平台的计算机视觉库, 支持多语言, 功能强大. 今天
- 摘要： 每到情人节、七夕节，不少小伙伴大伙伴们都会遇到这样一个世纪问题——怎么给女朋友/老婆一个与众不同的节日惊喜。今天给大家分享一个独特的
- 一、pycharm字体放大的设置File —>setting —> Keymap —>在搜寻框中输入increase —&
- 一、前言不知道大家有没有遇到过这样的问题，就是在某个软件或者某个网页里面有一篇文章，你非常喜欢，但是不能复制。或者像百度文档一样，只能复制一
- Python 提供了两个级别访问的网络服务。：低级别的网络服务支持基本的 Socket，它提供了标准的 BSD Sockets API，可以
- 本文实例为大家分享了python读取视频流提取视频帧的具体代码，供大家参考，具体内容如下方法一：通过imageio库和skimage库1.
- 问题原因：我遇到的情况，装了.NET2.0+IIS升级后就出现以上问题；不确定其他原因也会不会产生类似错误。（如果有，希望大家能贴出更多的原
- 前言因为项目需要，需要批处理很多Matlab的.m文件，从每个文件中提取结果合并到一个文件中。 很明显，如果手工统计，几百个文件会累死的。
- 什么是瀑布图？瀑布图用表达两个数值之间的变化过程，过程值为正的时候，向上加，过程值为负的时候向下减[1]。今天分享在Python中绘制瀑布图
- 中间件Django中的中间件是一个轻量级、底层的插件系统，可以介入Django的请求和响应处理过程，修改Django的输入或输出。中间件的设
- 错误Go 语言通过内置的错误接口提供了非常简单的错误处理机制，Error 类型是一个接口类型。type error interface {
- Ubuntu16.04自带python2.7与python3.5，某个项目编译却要求python版本大于等于3.7，遂考虑在原系统基础上再安
