Javacript实现颜色梯度变化和渐变的效果代码

 更新时间:2013年05月31日 17:24:59   作者:  
用js对导航栏的颜色做了梯度的变化处理,通过处理..获取两种颜色在变化时的各种颜色字符串,并且字符串的个数,即获取的频率可以调节
对于本站的导航栏,想做点什么。所以,选择了用js对导航栏的颜色做了梯度的变化处理。
起初,觉得用opacity属性(透明度)来改变颜色的梯度变化。不过,这样会出现一个问题。
每一个导航标签用的是[li],当鼠标浮动到标签上时,通过onmouseover()立即改变[li]的className,并用setInterval()来使其opacity(透明度)由0变到1.不过,当鼠标离开时,对于[li]标签的颜色恢复的处理貌似麻烦了许多。所以,很快就放弃了这个做法,换种思路。

到百度上一搜,看到了一篇很好的文章,地址为http://www.cnblogs.com/cloudgamer/archive/
2009/03/11/color.html。随之,进行了简化,找到了解决的办法。

不如首先通过两个颜色值,比如"#FFFFFF"、"#CCCCCC",其中一个为起始颜色,另一个为终止颜色。通过处理,获取两种颜色在变化时的各种颜色字符串,并且字符串的个数,即获取的频率可以调节。返回给某个数组变量,代码如下:
复制代码 代码如下:

/**
* @Desc 该文件是改变颜色梯度的库 - colorGrad.js
* @Author GenialX
* @Date 2013.05.30
* @QQ 2252065614
* @URL http://www.ihuxu.com
*/

/**
* 改变颜色的入口函数
* beginColor/endColor均为形如#FFFFFF的十六进制的字符串,rate为渐变的速度
* @return colorArray数组 形如#FFFFFF的字符串数组
* 调用格式 changeColor("#FFFFFF","#000000",100);
*/
function getColorArray(bColor,eColor,r){
//过渡中的颜色值,比如#FFFFFF
var curColor = new Object();
var beginColor = new Object();
var endColor = new Object();
var rate = new Object();
//得到每个rgb增长的方向。true代表增加,false代表减少
var isTrue = new Object();
var colorArray = new Array();
var i = 0;//数组下标

beginColor = getRGB(bColor);//改变成ogj类型
endColor = getRGB(eColor);//改变成ogj类型
curColor = getRGB(bColor);
rate = getRate(beginColor,endColor,r);
isTrue = getIsTrue(beginColor,endColor)

相关文章

  • JavaScript中的函数声明和函数表达式区别浅析

    JavaScript中的函数声明和函数表达式区别浅析

    这篇文章主要介绍了JavaScript中的函数声明和函数表达式区别浅析,本文总结的浅显易懂,非常好的一篇技术文章,需要的朋友可以参考下
    2015-03-03
  • $()JS小技巧

    $()JS小技巧

    $()JS小技巧...
    2007-07-07
  • JS数组方法reverse()用法实例分析

    JS数组方法reverse()用法实例分析

    这篇文章主要介绍了JS数组方法reverse()用法,结合实例形式分析了JS数组reverse()方法基本功能、用法与操作注意事项,需要的朋友可以参考下
    2020-01-01
  • 微信小程序实现菜单左右联动

    微信小程序实现菜单左右联动

    这篇文章主要为大家详细介绍了微信小程序实现菜单左右联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • JavaScript中SQL语句的应用实现

    JavaScript中SQL语句的应用实现

    最近一直在用javascript在做项目 可是做着做着 感觉很多功能代码都是重复的。
    2010-05-05
  • Bootstrap每天必学之简单入门

    Bootstrap每天必学之简单入门

    相信大家阅读了Bootstrap第一篇文章后,对Bootstrap充满了探索欲望,小编也对Bootstrap产生了兴趣,所以今天再整理一篇关于Bootstrap的入门介绍,希望大家喜欢。
    2015-11-11
  • js模拟点击以提交表单为例兼容主流浏览器

    js模拟点击以提交表单为例兼容主流浏览器

    我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的“提交”按钮来提交表单,下面为大家介绍下具体的实现
    2013-11-11
  • 读懂CommonJS的模块加载

    读懂CommonJS的模块加载

    这篇文章主要介绍了CommonJS的模块加载,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 详解JSON Web Token 入门教程

    详解JSON Web Token 入门教程

    这篇文章主要介绍了详解JSON Web Token 入门教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 浏览器缓存技术实现浅析

    浏览器缓存技术实现浅析

    这篇文章主要为大家介绍了浏览器缓存技术实现浅析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05

最新评论