How to implement color gradient change and gradient using Javacript code _ javascript tips-js tutorial

Source: Internet
Author: User
Use js to perform Gradient Changes on the color of the navigation bar .. obtain various color strings when the two colors change, and the number of strings, that is, the acquisition frequency can be adjusted for the navigation bar of this site, what do you want to do. 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:

The 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)

Related Article

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.