How to write a universal JavaScript effects library! (2/2)_javascript skills

In the previous essay, I posted the overall framework of the effects library and a simple opacity plug-in. Today’s essay is mainly about expanding other commonly used
effect plug-ins. After all, the framework can only be an empty shell, and the content still needs to be enriched by yourself.
If you have read the implementation details of my previous article, I won’t talk nonsense here. Let’s start with a piece of code:

Copy code The code is as follows:

/**//****************************************************/
// Move, here is move to which means moving to x, y. 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;                                                            ,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(Ah 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 Use the method of changing width and height instead of
if (effect.options.zoom!==undefined && navigator.userAgent.toLowerCase().indexOf('firefox') != -1){ 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  同上，是 size to, 改变到指定大小 by Go_Rush(阿舜) 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"; 
} 
/**//****************************************************/ 
/**//****************************************************/ 
// 背景色 by Go_Rush(阿舜) from http://ashun.cnblogs.com/ 
Effect.Init.bgcolor=function(effect){ 
    if (effect.options.bgcolor!==undefined && /^#?[a-f0-9]{6}$/i.test(effect.options.bgcolor)){ 
        var color =effect.element.style.backgroundColor || "#ffffff"; 
        //FireFox 下,即使css样式设置背景为 #ffffff格式,但程序取到的是 rgb(255,255,255)格式, 这里把他转化为 #ffffff格式 
        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 was posted last time 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 Importantly, all custom functions passed in through options can
obtain the initial settings of the element through effect.setting. On many occasions, we need to pass an onComplete
function in options to clean the battlefield and restore some settings after the effect is executed.
These effects can overlap. You can take a look at the example I wrote below.
I wrote about ten examples, which should be very detailed.
The complete, debuggable code and examples are as follows:

<fieldset> <legend> </legend>Single effect<button onclick="javascript:foo1()"> </button>Color foo1<button onclick="javascript:foo2()"> </button>big small foo2<button onclick="javascript:foo3()"> </button> position foo3<button onclick="javascript:foo4()"> </button>Transparency foo4<button onclick="javascript:foo5()"> </button>Zoom foo5<button onclick="javascript:foo6()"> </button>All foo6</fieldset> <fieldset> <legend> </legend>Composite effect<button onclick="javascript:fix1()"> </button> fade out fix1<button onclick="javascript:fix2()"> </button> Fold up fix2<button onclick="javascript:fix3()"> </button> Slowly become smaller and disappear fix3<button onclick="javascript:fix4()"> </button> Slowly become smaller and disappear 2 fix4<button onclick="javascript:fix5()"> </button> Color change fix5<button onclick="javascript:fix6()"> </button> Vibrate 5 times fix6</fieldset> <button onclick="javascript:location.reload()"> </button> Click here to restore after each effect <div id="div1" style="border:1px solid red;width:300px;height:150px;overflow:hidden;position:absolute;left:300px;top:200px;z-index:2;background-color:#ffffff"> Note FireFox does not support Zoom <a href="http://ashun.cnblogs.com/"> </a>Go_Rush(A Shun)<img src="http://www.google.com/intl/zh-CN_ALL/images/logo.gif" alt="How to write a universal JavaScript effects library! (2/2)_javascript skills" > </div>
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]