How to Write a common JavaScript effect library! (2/2)

The overall framework of the effect library and a simple opacity plug-in are attached to the above essay. Today, this essay is mainly used to expand other commonly used
Effect plug-ins, after all, the framework can only be an empty shell, the content must be enriched by yourself.
If I have read the implementation details of the previous article, I will not talk nonsense here. Let's start with the following code: Copy codeThe Code is as follows: /**//*********************************** *****************/
// Move. Here, move to is to move to x. Of course, you can also extend a move by to move x pixels.
Effect. Init. move = function (effect) {// Initialization
If (effect. options. x! = Undefined | effect. options. y! = Undefined ){
Var pos = Position. cumulativeOffset (effect. element );
Effect. setting. left = pos [0];
Effect. setting. top = pos [1];
Effect. setting. position = effect. element. style. position;
Effect. element. style. position = "absolute"
Effect. options. x = (effect. options. x = undefined )? Effect. setting. left: effect. options. x;
Effect. options. y = (effect. options. y = undefined )? Effect. setting. top: effect. options. y;
}
}
Effect. Fn. move = function (effect, pos) {// Effect
If (effect. options. x === undefined & effect. options. y === undefined) return
Effect. element. style. left = effect. setting. left + (effect. options. x-effect.setting.left) * pos + "px ";
Effect. element. style. top = effect. setting. top + (effect. options. y-effect.setting.top) * pos + "px ";
}
/**//*********************************** *****************/

/**//*********************************** *****************/
// Zoom by Go_Rush (A Shun) from http://ashun.cnblogs.com/
Effect. Init. zoom = function (effect ){
Effect. setting. zoom = effect. element. style. zoom | 1;
// Firefox does not support css zoom instead of width and height.
If (effect. options. zoom! = Undefined & navigator. userAgent. toLowerCase (). indexOf ('Firefox ')! =-1 ){
Effect. options. w = effect. element. offsetWidth * effect. options. zoom;
Effect. options. h = effect. element. offsetHeight * effect. options. zoom;
}
}
Effect. Fn. zoom = function (effect, pos ){
If (effect. options. zoom === undefined) return;
Effect. element. style. zoom = effect. setting. zoom + (effect. options. zoom-effect.setting.zoom) * pos
}
/**//*********************************** *****************/
/**//*********************************** *****************/
// Size same as above, is size to, changed to the specified size by Go_Rush (A Shun) from http://ashun.cnblogs.com/
Effect. Init. size = function (effect ){
If (effect. options. w! = Undefined | effect. options. h! = Undefined ){
Effect. setting. overflow = effect. element. style. overflow | 'visible ';
Effect. setting. width = effect. element. offsetWidth;
Effect. setting. height = effect. element. offsetHeight;
Effect. element. style. overflow = "hidden"
Effect. options. w = (effect. options. w = undefined )? Effect. setting. width: effect. options. w;
Effect. options. h = (effect. options. h = undefined )? Effect. setting. height: effect. options. h;
}
}
Effect. Fn. size = function (effect, pos ){
If (effect. options. w === undefined & effect. options. h === undefined) return;
Effect. element. style. width = effect. setting. width + (effect. options. w-effect.setting.width) * pos + "px ";
Effect. element. style. height = effect. setting. height + (effect. options. h-effect.setting.height) * pos + "px ";
}
/**//*********************************** *****************/
/**//*********************************** *****************/
// Background color by Go_Rush (A Shun) from http://ashun.cnblogs.com/
Effect. Init. bgcolor = function (effect ){
If (effect. options. bgcolor! = Undefined & amp;/^ \#? [A-f0-9] {6} $/I. test (effect. options. bgcolor )){
Var color = effect. element. style. backgroundColor | "# ffffff ";
// In FireFox, even if the css style is set to the # ffffff format, the program obtains the rgb (255,255,255) format. Here, convert it to the # ffffff format.
If (/rgb/I. test (color) {// "rgb (255, 0,255 )"
// Var arr = color. replace (/[rgb \ (\ s \)]/gi, ""). split (",")
Var arr = eval (color. replace ("rgb", "new Array "))
Color = "#" + Number (arr [0]). toColorPart () + Number (arr [1]). toColorPart () + Number (arr [2]). toColorPart ()
}
Effect. setting. bgcolor = color
}
}
Effect. Fn. bgcolor = function (effect, pos ){
If (effect. options. bgcolor = undefined) return;
Var c1 = effect. setting. bgcolor, c2 = effect. options. bgcolor
Var arr1 = [parseInt (c1.slice (1, 3), 16), parseInt (c1.slice (3, 5), 16), parseInt (c1.slice (5), 16)]
Var arr2 = [parseInt (c2.slice (1, 3), 16), parseInt (c2.slice (3, 5), 16), parseInt (c2.slice (5), 16)]
Var r = Math. round (arr1 [0] + (arr2 [0]-arr1 [0]) * pos)
Var g = Math. round (arr1 [1] + (arr2 [1]-arr1 [1]) * pos)
Var B = Math. round (arr1 [2] + (arr2 [2]-arr1 [2]) * pos)
Effect. element. style. backgroundColor = "#" + r. toColorPart () + g. toColorPart () + B. toColorPart ()
}
/**//*********************************** *****************/
/**//*********************************** *****************/
// Transparency, this last post by Go_Rush (A Shun) from http://ashun.cnblogs.com/
Effect. Init. opacity = function (effect ){
If (effect. options. opacity = undefined) return;
Effect. setting. opacity = Opacity (effect. element );
}
Effect. Fn. opacity = function (effect, pos ){
If (effect. options. opacity = undefined) return;
Opacity (effect. element, effect. setting. opacity + (effect. options. opacity-effect.setting.opacity) * pos );
}
/**//*********************************** *****************/

Here, effect. setting is very useful and very important for winter and winter. All the methods that can be passed into the UDF through options can be
Use effect. setting to obtain the initial settings of the element. In many cases, we need to transmit an onComplete in options.
The function is used to clean the battlefield and restore some settings after the effect is executed.
These effects can overlap. Let's take a look at the examples I wrote below.
I wrote a dozen examples, which should be very detailed.
Complete, debuggable code and examples are as follows:<Br/> <fieldset> <legend> single effect </legend> <p> <button onclick = "javascript: foo1 () "> color foo1 </button> <br/> <button onclick =" javascript: foo2 () "> foo2 </button> <br/> <button onclick =" javascript: foo3 () "> bitwise foo3 </button> <br/> <button onclick =" javascript: foo4 () "> transparent foo4 </button> <br/> <button onclick =" javascript: foo5 () "> Zoom foo5 </button> <br/> <button onclick =" javascript: foo6 () "> All foo6 </button> </p> </fieldset> <legend> Compound effect </legend> <p> <button onclick =" javascript: fix1 () "> fade out fix1 </button> <br/> <button onclick =" javascript: fix2 () "> fold fix2 </button> <br/> <button onclick =" javascript: fix3 () "> gradually become smaller and disappear fix3 </button> <br/> <button onclick =" javascript: fix4 () "> slowly fade away 2 fix4 </button> <br/> <button onclick =" javascript: fix5 () "> color fix5 </button> <br/> <button onclick =" javascript: fix6 () "> five vibrations fix6 </button> </p> </fieldset> <p> <button onclick =" javascript: location. reload () "> resume after each effect </button> </p> <p> note that FireFox does not support Zoom </p> Go_Rush (A Shun) <br/> <p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]