The blueeffects effect library is used to implement a simple effect similar to the background color gradient in csdn.

use the blueeffects effect library to achieve a gradient effect similar to the background color in csdn. Move the mouse over the preview area below to see the effect.

Blueeffects isGenie tribe(Genie tribeWhat is it, my friends can look at some other articles on my blogArticle, I believe you will be interested .) the basic results library is lightweight and can be flexibly separated and used by various results libraries. This prevents many other JS frameworks from referencing a large number of unnecessary results.CodeAt the same time, blueeffectsGenie tribeCode has played a very important role,Genie tribeBlueeffects is used to create all of the effects of the cool. various effects in blueeffects can be used in combination to produce richer effects. I wrote an article about blueeffects some time ago. It is estimated that it seems that it is all code, so there are not many friends who are interested in it. today, let's make a simple demo on the page. If you are interested, you can browse this article to learn more:I sorted out the basic effect library blueeffects in fairynest and published it.
. At the same time, here we provide anotherDownload link of blueeffects,Source codeThere are detailed comments in it. Thank you! If you are interested in previewing more dazzling results, you can try it out.Genie tribe. If necessary, I will continue to publish demos for each basic effect continuously here and explain the usage as much as possible.
/************************* Effect preview area *********** ******************/

Item1item2item3item4item5item6item7

********** *******************/

The following is the code to achieve this effect. The usage is actually very simple, but the premise must be to reference the blureffects effect library. At least the colorshow effect should be referenced.

Code
  /* * ***************** Colorshowtest ***************** */
Function Colortest (OBJ)
{
VaR Colors = [ " #999999 " , " #888888 " , " #777777 " , " #666666 " , " #555555 " , " #444444 " , " #333333 " , " #222222 " , " #111111 " ];
Blueeffects. colorshow ({OBJ: OBJ, colors: colors, timespace: 50 });
/*
For the parameter settings of blueeffects. colorshow, refer to the description of blueeffects. sizeshow above.
However, this is quite different from sizeshow.
First, you must set a color array. blueeffects. colorshow will change the color of the object in the order set in the array.
Timespace, used to set the interval between each two color changes.

There are several optional parameters that are not shown here:
Start and Stop. The usage is the same as described above.
When Background: True is set in the parameter, blueeffects. colorshow changes the background color of the object when changing the object color.
When border: True is set in the parameter, when blueeffects. colorshow changes the edge color of the object
Color when color: True is set in the parameter, when blueeffects. colorshow changes the color of the text contained in the object
The background, border, and color parameters can be used together to flexibly implement the desired color animation effect. When none of the three parameters is set,
The background is changed by default.
*/
}
Function Colortest2 (OBJ)
{
VaR Colors = [ " #999999 " , " #888888 " , " #777777 " , " #666666 " , " #555555 " , " #444444 " , " #333333 " , " #222222 " , " #111111 " ];
Blueeffects. colorshow ({OBJ: OBJ, colors: colors, timespace: 50 , Changetype: " Background " });
}

 

Below is the HTML code for each entry in the demo.

Code
<DivID= "Div1"Onmouseover= "Colortest (this )"Style= "Width: 500px; color: # ffffff; line-Height: 30px; Height: 30px; Background-color: # cccccc";>Item1</Div>