The Helper House (www.bkjia.com) is too busy to write articles for a long time. There is no time to write complicated things, and you can write the color gradient effect again. The color effect is generally two, the color gradient change and the style color gradient. The former is generally implemented using a filter in ie.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = gb2312 "/> <title> JavaScript color gradient and gradient effect </title>
Tip: the code can be modified before running!Program description
ColorGrads color gradient]
The ColorGrads program uses StartColor and EndColor to generate a color gradient set.
Colors can be expressed in red (r), Green (g), and blue (B.
The program first converts the general color representation into a set of elements using red (r), Green (g), and blue (B) color values.
First you need to know what color representation, from the w3c Colors part (http://www.w3.org/TR/CSS21/syndata.html#color-units) can know the following form:
Keyword mode:
Em {color: red}
RGB color mode:
Em {color: # f00}
Em {color: # ff0000}
Em {color: rgb (255, 0, 0 )}
Em {color: rgb (100%, 0%, 0% )}
The above indicates the same color (red ).
The format of obtaining the color attribute is different from that of ff. ff returns the third form of RGB color mode, and ie returns the result according to the set format.
First, let's talk about the RGB color mode. The first two are usually used to understand their differences. They are represented in hexadecimal notation, and we want 10 hexadecimal notation.
Convert a hexadecimal character to a decimal number. Generally, parseInt is used. After the substr truncation, parseInt can be used.
The # ff0000 format can be converted as follows:
Return Map ([color. substr (1, 2), color. substr (3, 2), color. substr (5, 2)],
Function (x) {return parseInt (x, 16 );}
)
The second parameter of parseInt is the hexadecimal value of the first parameter.
For the # f00 format, the last one is similar, but the complete representation must be replaced before conversion:
Return Map ([color. substr (1, 1), color. substr (2, 1), color. substr (3, 1)],
Function (x) {return parseInt (x + x, 16 );}
)
The latter two may be less used. One is represented by a 10-digit rgb color value, and the other is represented by a percentage.
Ff is expressed strictly in that format, while ie is "relaxed", for example:
Ie can allow mixed numeric percentages, and ff cannot;
Ff must be separated by commas (,). ie can be separated by spaces;
Of course, we should set it according to w3c standards.
Ps: The EM {color: rgb 1.0 0.0 0.0} written in the DHTML manual is useless and should not be misled.
In this form, the program uses a regular expression to obtain a value. If there is %, the corresponding value is calculated based on the percentage:
Return Map (color. match (/\ d + (\. \ d + )? \ %? /G ),
Function (x) {return parseInt (x. indexOf ("%")> 0? ParseFloat (x, 10) * 2.55: x, 10 );}
)
The keywords are familiar to everyone, but it is troublesome to convert them, because there are no certain rules and they can only correspond one by one:
Var mapping = {"red": "# FF0000"}; // omitted
Color = mapping [color. toLowerCase ()];
If (color ){
Return Map ([color. substr (1, 2), color. substr (3, 2), color. substr (5, 2)],
Function (x) {return parseInt (x, 16 );}
)
}
After you obtain the start color and end color data in the Create color set program, you can obtain the Step Size Based on the Step:
StartColor = this. GetColor (this. StartColor ),
EndColor = this. GetColor (this. EndColor ),
StepR = (endColor [0]-startColor [0])/this. Step,
StepG = (endColor [1]-startColor [1])/this. Step,
StepB = (endColor [2]-startColor [2])/this. Step;
Generate a set based on the step size:
For (var I = 0, n = this. step, r = startColor [0], g = startColor [1], B = startColor [2]; I <n; I ++ ){
Colors. push ([r, g, B]); r + = stepR; g + = stepG; B + = stepB;
}
Colors. push (endColor );
The correct color value ranges from 0 to 255 without decimal digits, so it is best to correct it:
Return Map (colors, function (x) {return Map (x, function (x ){
Return Math. min (Math. max (0, Math. floor (x), 255 );
});});
[ColorTrans color gradient]
With the color gradient set, you only need to set a timer to display the set values in turn as a gradient effect.
This gradient is generally divided into two steps: (FadeIn) and (FadeOut ).
The principle is to change the index of the _ index set to gradually increase and decrease at the time of import:
// Fade in color
FadeIn: function (){
This. Stop (); this. _ index ++; this. SetColor ();
If (this. _ index <this. _ colors. length-1 ){
This. _ timer = setTimeout (Bind (this, this. FadeIn), this. Speed );
}
},
// Fade out
FadeOut: function (){
This. Stop (); this. _ index --; this. SetColor ();
If (this. _ index> 0 ){
This. _ timer = setTimeout (Bind (this, this. FadeOut), this. Speed );
}
},
In the SetColor setting style program, CSS color is used to set the style attributes to be modified. For example, the font color is "color" and the background color is "backgroundColor ":
Var color = this. _ colors [Math. min (Math. max (0, this. _ index), this. _ colors. length-1)];
This. _ obj. style [this. cssColor] = "rgb (" + color [0] + "," + color [1] + "," + color [2] + ")";
Because the color set is generated based on the start color, end color, and number of steps, if you want to modify these attributes, you must regenerate the set.
The Reset program is used to modify these attributes and regenerate the set. After the set is regenerated, the index must be set back to 0:
// You must obtain the color set again after changing the color.
Color = Extend ({StartColor: this. _ startColor, EndColor: this. _ endColor, Step: this. _ step}, color || {});
// Set attributes
This. _ grads. StartColor = this. _ startColor = color. StartColor;
This. _ grads. EndColor = this. _ endColor = color. EndColor;
This. _ grads. Step = this. _ step = color. Step;
// Obtain the Color Set
This. _ colors = this. _ grads. Create ();
This. _ index = 0;
Tips
The link label a is not used in the color gradient menu, because the pseudo class color of a cannot be directly modified using js (unless the class is changed ).
I didn't expect a good method for the moment, so I had to use onclick jump instead.
An array problem was also found during the test. Running alert ([,]. length) on ie and ff will display 3 and 2 respectively.
If the last element is not written, ff will ignore this element. If it is written, it will not ignore undefined and null. After reading this document, I also find the reason.
In this case, insert a new Array.
The test also found a problem with map of chrome (1.0.154.48). map is the Array method of js1.6, and both ff and chrome are supported (see here for details ).
In ff, [, 1]. map (function () {return 0}) Returns [0, 0], but chrome Returns [, 0].
That is, if the element in chrome is null (excluding null and undefined), null will be returned, and the same will be created using new Array.
This is not reasonable, so it should be improved in the future.
Instructions for use
ColorGrads has only three attribute settings:
StartColor: "# fff", // start color
EndColor: "#000", // end color
Step: 20 // gradient Series
After setting the attributes, use Create to generate a set.
ColorTrans can set the following attributes to implement gradient objects as long as one parameter:
StartColor: "", // start color
EndColor: "#000", // end color
Step: 20, // gradient Series
Speed: 20, // gradient Speed
CssColor: "color" // set attributes (Scripting attributes)
If StartColor is not set, the style value obtained by CurrentStyle is automatically used.
StartColor, EndColor, and Step must be set by Reset after instantiation.
For more information, see instances. Article from: http://www.cnblogs.com/cloudgamer/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
