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

对于本站的导航栏，想做点什么。所以，选择了用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)

赞 (0)

相关推荐

  • 详解Javacript和AngularJS中的Promises

    比如页面调用google地图的api时就使用到了promise. function success(position){ var cords = position.coords; console.log(coords.latitude + coords.longitude); } function error(err){ console.warn(err.code+err.message) } navigator.geolocation.getCurrentPosition(success, e

  • 使用Javacsv.jar的jar包操作csv文件的方法

    CSV其实就是COMMA SEPARATED VALUE的缩写.csv文件是分隔文件,如果使用java的io流来写,比较麻烦,这里为大家提供一个javacsv的jar包,这个很方便操作csv文件. 下载地址:http://xiazai.jb51.net/201608/yuanma/javcsv(jb51.net).rar 那如何使用呢? 只要看看以下一个例子,您一下就明白了. import com.csvreader.CsvReader; import com.csvreader.CsvWrit

  • javac、java打jar包命令实例

    Java开发中使用IDE工具肯定会很大程度的提高开发效率,但是有时候需要用java命令在服务器上启动Java工程代码来完成一系列的功能 ,当然用ANT也非常方便.下面以简单HelloWorld代码为例子来记录,如何使用最基本的Java命令. 一.编写HelloWorld,代码如下: 复制代码 代码如下: public class Hello{      public static void main(String[] args) {          System.out.println("He

  • JAVA和JAVAC 命令详细介绍

    JAVA和JAVAC 命令 javac和java命令行中的-classpath选项 这是个很基础的问题,但是因为基本上都是用现有的IDE工具 来开发java程序,所以很少有人意识到这一点. javac -classpath,设定要搜索类的路径,可以是目录,jar文件,zip文件(里面都是class文件),会覆盖掉所有在CLASSPATH里面的设定. -sourcepath, 设定要搜索编译所需java 文件的路径,可以是目录,jar文件,zip文件(里面都是java文件). 所以一个完整的jav

  • javacript使用break内层跳出外层循环分析

    本文实例分析了javacript使用break内层跳出外层循环的用法.分享给大家供大家参考.具体分析如下: 与php不同,javascript中循环跳出break,需要添加额外的标签.以"百钱买百鸡"为例(搜索张丘建,百钱买百鸡).如果需要算出全部,则是下面的代码: 复制代码 代码如下: <html> <head> </head> <body> <script type="text/javascript">

  • windows命令行中java和javac、javap使用详解(java编译命令)

    windows命令行中java和javac、javap使用详解(java编译命令)

    如题,首先我们在桌面,开始->运行->键入cmd 回车,进入windows命令行.进入如图所示的画面: 可知,当前默认目录为C盘Users文件夹下的Administrator文件夹.一般而言,我们习惯改变当前目录.由于windows有磁盘分区,若要跳到其他磁盘,例如E盘,有几种方法: 1.输入命令: pushd 路径(此命令可将当前目录设为所希望的任一个已存在的路径) 2.输入命令: e:  转移到e盘,然后再输入 cd 转移到所希望的已知路径. 如图: 希望在windows命令行下使用jav

  • 基于JavaCore文件的深入分析

     产生时间 Java程序运行时,有时会产生JavaCore及HeapDump文件,它一般发生于Java程序遇到致命问题的情况下. 有时致命问题发生后,Java应用不会死掉,还能继续运行: 但有时致命问题发生,Java进程会死掉: 为了能够保留Java应用发生致命错误前的运行状态,JVM在死掉前产生两个文件,分别为JavaCore及HeapDump文件. 有何区别 JavaCore是关于CPU的,而HeapDump文件是关于内存的. JavaCore文件主要保存的是Java应用各线程在某一时刻的运

  • javac -encoding 用法详解

    昨天有个刚学java的师弟发了个程序给我,说死活编译不过,老是报编码问题,自己试了一下,也出问题了... 当我们编辑了一个Java源文件保存时,是以操作系统默认的字符编码保存的(Windows xp默认字符集是GBK).当调用javac命令时,会把源文件进行一次编码转换,如果没有指定字符集,就从操作系统默认的字符集转换成Java内部默认的unicode字符集,然后再将源文件编译成class文件,并且以unicode的编码形式保存到硬盘上. 仔细查看了一下错误,才发现是文件编码的问题,他的文件用的

  • eclipse 中的javac命令与java命令

    eclipse 中的javac命令与java命令

    eclipse中的javac命令与java命令 一.eclipse的javac命令:当eclipse对.java(源文件)文件进行保存操作时(快捷键ctrl+s),会执行javac命令.见上图,Default output folder(默认输出文件):为clss文件的保存位置. 二.eclipse的java命令:见上图,当选中该java文件后,执行java Application(快捷键F11)方法,会运行该class文件,如该class文件未生成,则先执行javac命令,也就是保存该java

  • javacript获取当前屏幕大小

    在使用html5在android下做开发的时候,要获取屏幕实际的大小,直接上代码,可以通过如下代码测试. 复制代码 代码如下: <html> <script> function a(){ document.write( "屏幕分辨率为:"+screen.width+"*"+screen.height +"<br />"+ "屏幕可用大小:"+screen.availWidth+"*

随机推荐