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;

标签:JavaScript,颜色,梯度,渐变
0
投稿

猜你喜欢

  • 实例讲解Access数据库在线压缩的实现方法

    2008-11-28 14:29:00
  • python字符串的多行输出的实例详解

    2021-06-25 20:59:45
  • 解决mybatis使用char类型字段查询oracle数据库时结果返回null问题

    2024-01-26 03:05:05
  • 利用Python创建第一个Django框架程序

    2022-08-08 02:21:26
  • SQL Server 2008 阻止保存要求重新创建表的更改问题的设置方法

    2024-01-14 13:53:03
  • MYSQL使用.frm恢复数据表结构的实现方法

    2024-01-24 21:52:27
  • 正确的PHP匹配UTF-8中文的正则表达式

    2024-04-10 10:56:36
  • Linux下python制作名片示例

    2022-06-07 00:29:33
  • Python实现注册登录系统

    2021-10-21 20:01:05
  • java JSP开发之Spring中Bean的使用

    2023-06-16 07:35:08
  • 基于python opencv单目相机标定的示例代码

    2022-10-10 23:42:37
  • Go 语言进阶freecache源码学习教程

    2023-08-06 03:05:20
  • 实例解析Python设计模式编程之桥接模式的运用

    2021-06-03 18:48:04
  • php 时间计算问题小结

    2023-11-03 14:37:06
  • PHP使用POP3读取邮箱接收邮件的示例代码

    2024-06-05 09:44:48
  • Golang实现单链表的示例代码

    2024-02-11 15:09:27
  • Python实现查找系统盘中需要找的字符

    2022-10-02 02:35:50
  • python要安装在哪个盘

    2022-10-09 13:16:52
  • php中使用key,value,current,next和prev函数遍历数组的方法

    2023-10-18 20:17:39
  • 自动备份Oracle数据库

    2024-01-20 15:08:14
  • asp之家 网络编程 m.aspxhome.com