I sorted out the basic effect library blueeffects in fairynest and published it.

Blueeffects is my previousArticleWebOS is lightweight and easy to use.

However, I am sorry that I was going to sort out a detailed document for you to see, but these two holidays have all been dizzy and delayed a lot of time. A friend who is afraid of interest is waiting for an emergency. This morning, I will come up with a simple demo. I will post it for you to see. View the source file on the page to see detailed usage notes. In the past two days, I may update this article, add the latest and more detailed documents, or I will add a new article.

In addition, several examples made in the demo are very basic. In actual use, you can flexibly combine several effects to implement more complex animations. I will also consider adding some examples, you are also welcome to discuss with me.

The following is a demo of using blueeffectsCode, You can see that the use is relatively simple and convenient.

<SCRIPT type = "text/JavaScript">

/*************************************** ** Sizeshowtest ************************************* ************/
Function turntobig ()
{
VaR OBJ = Document. getelementbyid ("sizeshowobj ");
Blueeffects. sizeshow ({OBJ: OBJ, endwidth: 150, endheight: 150, changetime: 20, changetimes: 5, stop: turntosmall });

/*
OBJ is the object to be sizeshow;
Endwidth, that is, the width to be changed after OBJ passes through sizeshow. If startwidth is not used in the optional parameter mentioned below
Start to change to endwidth;
Endheight is the same as endwidth, but only the height of the object;
Changetime is used to set the time of the sizeshow process, in the unit of Hao second, that is, how long you want the animation to run. The actual running status may be caused by browsing
The Running Efficiency of js in the tool varies, so you should be sure of it when using it;
Changetimes is used to set the number of times that the sizeshow object changes within the changetime range during the sizeshow process. For example, in Flash animation
A 5-second animation can be composed of five shards, or a 10-digit animation, or a number of other shards, each of which is a different state of change, in the continuous changing process
In this process, animation effects are produced for human vision. Changetimes is used to set the number of shards. In the same 5 seconds of animation time, the larger the number of animations, the animation effect is
It will be smoother, but it is also likely to reduce JS execution efficiency and extend the animation time. How can changetime and changetimes be used together?
It depends on the user's personal grasp.
Stop, set a method called at the end of this sizeshow. This is a supported parameter.

There are also three optional parameters not shown in this example: startwidth, startheight, start;
Startwidth indicates the start width. When this parameter is set, the actual width of the sizeshow object changes from startwidth,
Startheight, just like startwidth;
Start is a function executed at the beginning of sizeshow. Similar to the stop function used here, it refers to the function executed at the end of sizeshow. With these two parameters,
The sizeshow method is more flexible to use. You can call another sizeshow or other effects after a sizeshow method ends to form more complex animation effects.
I will not talk about the specific usage here. You can test it by yourself or try to modify it.

In addition, in actual use, except that obj is a required parameter, it does not matter if all other parameters are not set. blueeffects. sizeshow
The default value is set for each parameter, but if neither endheight nor endwidth is set, no effect will be displayed. In fact, blueeffects. sizeshow determines
When there is no animation effect to be executed, it will immediately stop running.
In addition, it is obvious that the OBJ parameter should be set to a DOM object that can indeed be found in the DOM element, startwidth, endwidth, startheight,
Endheight, changetime, and changetimes should all be set to integers, and start and stop should be set to executable functions; blueeffects. sizeshow
Although some fault tolerance work has been done, it is difficult to ensure that the operation will not go wrong if you are too careless during use.
Other effects of blueeffects are similar. If you want to use these effects, pay attention to the basic rules when setting parameters. Thank you !!
*/
}
Function turntosmall ()
{
VaR OBJ = Document. getelementbyid ("sizeshowobj ");
Blueeffects. sizeshow ({OBJ: OBJ, endwidth: 100, endheight: 100, changetime: 20, changetimes: 5 });
}
 /*************************************** ************************************ ****************/
Function move ()
{
VaR OBJ = Document. getelementbyid ("moveobj ");
Blueeffects. Move ({OBJ: OBJ, endx: 1000, Endy: 500, changetime: 100, changetimes: 10, stop: movestop });
/*
For the parameter settings of blueeffects. Move, refer to the description of blueeffects. sizeshow above.
The differences are mainly endx, Endy, and optional startx and starty, which respectively indicate that the X coordinates of the move stop are Y coordinates, and the start X coordinates and Y coordinates;
*/
}
Function movestop ()
{
Blueeffects. Move ({OBJ: Document. getelementbyid ("moveobj"), endx: 460, Endy: 65, changetime: 50, changetimes: 10 });
}
/*************************************** ** Alphashowtest ************************************* ************/
Function alphashow ()
{
VaR OBJ = Document. getelementbyid ("alphashowobj ");
Blueeffects. alphashow ({OBJ: OBJ, endalpha: 0, changetime: 500, changetimes: 10, stop: alphashowstop });
/*
For the parameter settings of blueeffects. alphashow, refer to the description of blueeffects. sizeshow above.
The main difference is that endalpha has an optional startalpha, indicating the transparency of alphashow stop and the transparency of start. The transparency should be an integer between 0 and.
If startalpha is not set, it starts from 100 by default, that is, it is normal and completely opaque.
*/
}
Function alphashowstop ()
{
VaR OBJ = Document. getelementbyid ("alphashowobj ");
Blueeffects. alphashow ({OBJ: OBJ, startalpha: 0, endalpha: 100, changetime: 500, changetimes: 10 });
}
 /*************************************** ** Colorshowtest ************************************* ************/
Function colortest (OBJ)
{
VaR colors = ["#999999", "#888888", "#777777", "#666666", "#555555", "#444444", "#333333 ", & quot; #222222 & quot;, & quot; #111111 & quot;];
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 ", & quot; #222222 & quot;, & quot; #111111 & quot;];
Blueeffects. colorshow ({OBJ: OBJ, colors: colors, timespace: 50, changetype: "background "});
}

/*************************************** * Dragtest ************************************* ****************/
Function drag ()
{
Blueeffects. Drag ({dragbar: Document. getelementbyid ("dragobj ")});
Blueeffects. Drag ({dragbar: Document. getelementbyid ("dragbar"), dragobj: Document. getelementbyid ("dragparent ")});

/*
Dragbar to set the object you want to drag, that is, the DOM element object that you want the mouse to drag by grasping it. This is a required object.
Dragobj: Set the object to be dragged together. That is, the object that will be dragged together when you move the dragbar with the mouse. But when you hold dragobj with the mouse, you cannot
Drag, you can only drag dragobj by grabbing the dragbar, which is very important and useful. The example on the page is easy to understand.

There are also three optional parameters not shown here
Start and Stop are similar to the above.
Move, used to set a function to be executed along with the drag process.

In addition, blueeffects. Drag and blueeffects have a very useful blueeffects. resize. No instance is created here
The basic usage is as follows:
Blueeffects. Resize ({resizebar: Document. getelementbyid ("div8"), resizeobj: Document. getelementbyid ("div9 ")});
There are several optional parameters
Xresize: When xresize: True is set, only the width of the resizeobj can be dragged and resize.
Yresize: When yresize: True is set, only the height of the resizeobj can be dragged and resize.
If none of them are set, both the height and width can be resize.
There are also three optional parameters: start, stop, and move.
*/
}

</SCRIPT>

 

Below is the download link of the demo

Http://files.cnblogs.com/ublue2006/BlueEffectsDemo.rar