Home > Web Front-end > JS Tutorial > Javascript implements color gradient changes and gradient effect code_javascript skills

Javascript implements color gradient changes and gradient effect code_javascript skills

WBOY
Release: 2016-05-16 17:33:10
Original
1077 people have browsed it

I want to do something about the navigation bar of this site. Therefore, I chose to use js to change the gradient of the color of the navigation bar.
At first, I thought of using the opacity attribute (transparency) to change the gradient of the color. However, there is a problem.
Each navigation label uses [li]. When the mouse floats over the label, the className of [li] is immediately changed through onmouseover(), and setInterval() is used to change its opacity from 0 to 1. .However, when the mouse leaves, it seems to be a lot more troublesome to restore the color of the [li] tag. Therefore, I quickly gave up this approach and changed my mind.

I searched on Baidu and saw a good article at http://www.cnblogs.com/cloudgamer/archive/
2009/03/11/color.html. Subsequently, simplifications were made and a solution was found.

It is better to first pass two color values, such as "#FFFFFF" and "#CCCCCC", one of which is the starting color and the other is the ending color. Through processing, various color strings are obtained when the two colors change, and the number of strings, that is, the frequency of acquisition, can be adjusted. Return to an array variable, the code is as follows:

Copy code The code is as follows:

/* *
* @Desc This file is a library for changing color gradients - colorGrad.js
* @Author GenialX
* @Date 2013.05.30
* @QQ 2252065614
* @URL http:/ /www.ihuxu.com
*/

/**
* Entry function to change color
* beginColor/endColor are both hexadecimal strings in the shape of #FFFFFF, and rate is the speed of the gradient
* @return colorArray array of characters in the shape of #FFFFFF String array
* Calling format changeColor("#FFFFFF","#000000",100);
*/
function getColorArray(bColor,eColor,r){
//Color value in transition, such as #FFFFFF
var curColor = new Object();
var beginColor = new Object();
var endColor = new Object();
var rate = new Object();
//Get each rgb direction of growth. true represents increase, false represents decrease
var isTrue = new Object();
var colorArray = new Array();
var i = 0; //Array subscript

beginColor = getRGB(bColor);//Change to ogj type
endColor = getRGB(eColor);//Change to ogj type
curColor = getRGB(bColor);
rate = getRate(beginColor,endColor,r) ;
isTrue = getIsTrue(beginColor,endColor)
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template