Code for performing color gradient change and gradient using Javacript

Source: Internet
Author: User

What do you want to do in the navigation bar of this site. Therefore, I chose to use js to perform Gradient Changes on the color of the navigation bar.
At first, I thought that the opacity attribute (transparency) was used to change the gradient of the color. However, this will cause a problem.
Each navigation label uses [li]. When the mouse moves to the label, the className of [li] is changed through onmouseover () and setInterval () is used () to change its opacity (transparency) from 0 to 1. however, when the mouse leaves, it seems a lot of trouble to restore the color of the [li] label. Therefore, I quickly gave up this practice and changed my mind.

To Baidu on a search, saw a good article, address for http://www.cnblogs.com/cloudgamer/archive/
2009/03/11/color.html. Then, the solution is simplified and found.

It is better to first use two color values, such as "# FFFFFF" and "# CCCCCC", one of which is the starting color and the other is the ending color. After processing, obtain the various color strings of the two colors when they change, and the number of strings, that is, the acquisition frequency can be adjusted. The Code returned to an array variable is as follows:Copy codeThe Code is as follows :/**
* @ Desc this file is the library for changing the color gradient-colorGrad. js
* @ Author GenialX
* @ Date 2013.05.30
* @ QQ 2252065614
* @ URL http://www.ihuxu.com
*/

/**
* Function for changing colors
* BeginColor/endColor are hexadecimal strings in the form of # FFFFFF. The rate is the gradient speed.
* @ Return colorArray array is like # FFFFFF String Array
* Call format changeColor ("# FFFFFF", "#000000", 100 );
*/
Function getColorArray (bColor, eColor, r ){
// The color value in the transition, for example, # FFFFFF
Var curColor = new Object ();
Var beginColor = new Object ();
Var endColor = new Object ();
Var rate = new Object ();
// Obtain the growth direction of each rgb. True indicates increase, and false indicates decrease.
Var isTrue = new Object ();
Var colorArray = new Array ();
Var I = 0; // array subscript

BeginColor = getRGB (bColor); // change to the ogj type.
EndColor = getRGB (eColor); // change to the ogj type.
CurColor = getRGB (bColor );
Rate = getRate (beginColor, endColor, r );
IsTrue = getIsTrue (beginColor, endColor)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.