如何寫一個通用的JavaScript效果庫！(2/2)
更新時間：2007年04月12日 00:00:00 作者：
在上個隨筆中貼出了效果庫的整體框架，和一個簡單的opacity插件. 今天這個隨筆主要是擴展其他常用
效果插件，畢竟框架只能是個空殼，內(nèi)容還是要自己充實。
如果看過了我上篇的實現(xiàn)細(xì)節(jié)，這里就不多說廢話了，來段代碼先：
/**//****************************************************/
// 移動， 這里是move to 就是移動到 x,y 當(dāng)然，大家也可以再擴展一個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樣式設(shè)置背景為 #ffffff格式,但程序取到的是 rgb(255,255,255)格式, 這里把他轉(zhuǎn)化為 #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傳進來自定義函數(shù)都可以
通過effect.setting來獲取element最初的設(shè)置。 在很多場合，我們需要在 options 中傳一個 onComplete
函數(shù)進來， 用來在效果執(zhí)行完畢后，打掃戰(zhàn)場，恢復(fù)一些設(shè)置。
這些效果是可以重疊的，大家可以看看下面我寫的例子。
寫了十來個例子，應(yīng)該很詳細(xì)了。
完整的，可調(diào)試代碼和例子如下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
效果插件，畢竟框架只能是個空殼，內(nèi)容還是要自己充實。
如果看過了我上篇的實現(xiàn)細(xì)節(jié)，這里就不多說廢話了，來段代碼先：
復(fù)制代碼 代碼如下:
/**//****************************************************/
// 移動， 這里是move to 就是移動到 x,y 當(dāng)然，大家也可以再擴展一個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樣式設(shè)置背景為 #ffffff格式,但程序取到的是 rgb(255,255,255)格式, 這里把他轉(zhuǎn)化為 #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傳進來自定義函數(shù)都可以
通過effect.setting來獲取element最初的設(shè)置。 在很多場合，我們需要在 options 中傳一個 onComplete
函數(shù)進來， 用來在效果執(zhí)行完畢后，打掃戰(zhàn)場，恢復(fù)一些設(shè)置。
這些效果是可以重疊的，大家可以看看下面我寫的例子。
寫了十來個例子，應(yīng)該很詳細(xì)了。
完整的，可調(diào)試代碼和例子如下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
JS跳出循環(huán)的5種方法總結(jié)(return、break、continue、throw等)
想必大家都遇到過循環(huán)遍歷時遇到滿足條件的時候就跳出循環(huán)這樣的需求,于是整理了一篇各種循環(huán)是如何結(jié)束的,這篇文章主要給大家介紹了關(guān)于JS跳出循環(huán)的5種方法,分別是return、break、continue、throw等的相關(guān)資料,需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細(xì)介紹了一些你不知道的JavaScript異步相關(guān)知識，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)JavaScript有一定幫助，感興趣的可以跟隨小編一起學(xué)習(xí)一下2022-11-11
html a標(biāo)簽-超鏈接中confirm方法使用介紹
confirm可以彈出確定取消對話框，然后根據(jù)用戶的選擇執(zhí)行相應(yīng)的操作，接下來介紹實現(xiàn)過程，需要了解的朋友可以參考下2013-01-01
ES6中的Promise對象與async和await方法詳解
Promise是es6引入的異步編程薪解決方案，語法上promise就是一個構(gòu)造函數(shù)，用來封裝異步操作病可以獲取其成功或失敗的結(jié)果，這篇文章主要介紹了ES6中的Promise對象與async和await方法,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡易計算器小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了javascript計算漸變顏色的實例的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細(xì)介紹了bootstrap laydate日期組件使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
Javascript中call與apply的學(xué)習(xí)筆記
經(jīng)?？吹竭@倆哥們，看來看去都是講他們的區(qū)別，一直沒搞太清楚作用究竟是什么，現(xiàn)在記錄下自己理解，有錯的話希望指出！2014-09-09
這篇文章主要介紹了JS實現(xiàn)的手機端精簡幻燈片效果,涉及javascript結(jié)合時間函數(shù)動態(tài)修改頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-09-09
JS實現(xiàn)頁面長時間不操作退出到登錄頁面的示例代碼
這篇文章主要介紹了JS實現(xiàn)頁面長時間不操作退出到登錄頁面的示例代碼,通過在head標(biāo)簽中引入jquey和頁面長時間不操作的js頁面,結(jié)合實例代碼講解的非常詳細(xì),需要的朋友可以參考下2024-03-03