如何寫一個通用的JavaScript效果庫！(2/2)

更新時間：2007年04月12日 00:00:00 作者：

在上個隨筆中貼出了效果庫的整體框架，和一個簡單的opacity插件. 今天這個隨筆主要是擴展其他常用
效果插件，畢竟框架只能是個空殼，內容還是要自己充實。
如果看過了我上篇的實現細節(jié)，這里就不多說廢話了，來段代碼先：

/**//****************************************************/  
// 移動， 這里是move to  就是移動到 x,y 當然，大家也可以再擴展一個move by  移動x個象素  
Effect.Init.move=function(effect){   //初始化  
    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){     //效果  
    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(阿舜) from http://ashun.cnblogs.com/  
Effect.Init.zoom=function(effect){      
    effect.setting.zoom      =effect.element.style.zoom || 1;  
    // firefox 不支持 css的 zoom 用  改變 width,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  同上，是 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()  
}  
/**//****************************************************/  
/**//****************************************************/  
// 透明度，這個上個貼過了   by Go_Rush(阿舜) 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);      
}  
/**//****************************************************/ 

這里 effect.setting 是非常有用而且非常重要的冬冬，所有的通過options傳進來自定義函數都可以
通過effect.setting來獲取element最初的設置。在很多場合，我們需要在 options 中傳一個 onComplete
函數進來，用來在效果執(zhí)行完畢后，打掃戰(zhàn)場，恢復一些設置。
這些效果是可以重疊的，大家可以看看下面我寫的例子。
寫了十來個例子，應該很詳細了。
完整的，可調試代碼和例子如下：

<fieldset> <legend>單一效果</legend> <button onclick="javascript:foo1()">顏 色 foo1</button>&nbsp; <button onclick="javascript:foo2()">大 小 foo2</button>&nbsp; <button onclick="javascript:foo3()">位 置 foo3</button>&nbsp; <button onclick="javascript:foo4()">透 明 度 foo4</button>&nbsp; <button onclick="javascript:foo5()">Zoom foo5</button>&nbsp; <button onclick="javascript:foo6()">所有 foo6</button>&nbsp;  </fieldset>  <fieldset> <legend>復合效果</legend> <button onclick="javascript:fix1()"> 淡出fix1</button>&nbsp; <button onclick="javascript:fix2()"> 折起fix2</button>&nbsp; <button onclick="javascript:fix3()"> 慢慢變小消失 fix3</button>&nbsp; <button onclick="javascript:fix4()"> 慢慢變小消失2 fix4</button>&nbsp; <button onclick="javascript:fix5()"> 變色 fix5</button>&nbsp; <button onclick="javascript:fix6()"> 震動5次 fix6</button>&nbsp;  </fieldset>   <button onclick="javascript:location.reload()"> 每次效果后按這里恢復</button>&nbsp;    注意 FireFox 不支持 Zoom <div   class="ublnpf9mb"   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">        <a >Go_Rush(阿舜)</a>     <img src="http://www.google.com/intl/zh-CN_ALL/images/logo.gif"> </div>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]