|
|
而其他一些比較炫的效果無非是對這些最基本效果的組合和運用。
現(xiàn)在網(wǎng)上已經(jīng)有很多很不錯的優(yōu)秀Javascript庫或者效果庫，我們是否有必要再造輪子呢？
放眼望去，Yahoo UI, 基于Prototype的scriptaculous, Rico， JQuery, Dojo，還有很多很多。
這些庫都帶有很不錯很優(yōu)秀的動態(tài)效果。我們可以直接使用。
但是對于一些中小型項目來說，只是偶爾用到一兩個特效，就沒有必要引用整個框架，要知道
這些家伙體積都不小哦. prototype.js 50K, scripttaculous的 effects.js也有40-50k dojo,yui 更大。
在大多數(shù)情況下我們需要一個小巧獨立(300行代碼以內(nèi))，無侵入性的效果庫。.即使有現(xiàn)有的輪子，
我們不但要學會怎么使用輪子，更要學會如何親手造一個輪子。
基于以上原因，我們今天來重寫一個靈活的，擴展性強的，小巧的，跨瀏覽器的動態(tài)效果庫。
考慮到prototype.js 用戶群的廣泛性，我的部分代碼引用了prototype.js,當然，我說過 ，我們要做一個獨立
的效果庫，即使在沒有prototype.js的情況下，也要讓代碼正常工作。
先做一些準備工作。下面這些代碼是任何效果庫中必不可少的，因為它負責一些類似取位置坐標，
設置，獲取element的透明度等這些基礎工作。
代碼：
復制代碼 代碼如下:
/*
這個函數(shù)的代碼來自 Prototype.js http://prototype.conio.NET/
如果頁面引用了prototype.js ,則可以刪除下面這個函數(shù),
當然,即使不刪除也沒關(guān)系,因為作了簡單的兼容性判斷
*/
(function(){
if (!("Prototype" in window)){
Prototype={emptyFunction:function(){}};
Class ={
create: function(){return function(){this.initialize.apply(this, arguments)}}
};
$ = function(element){
return typeof(element)=="string"?document.getElementById(element):element
};
$A= function(arrLike){
for(var i=0,ret=[];i<arrLike.length;i++) ret[i]=arrLike[i];
return ret
};
Number.prototype.toColorPart =function(){return String("00"+this.toString(16)).slice(-2)};
Function.prototype.bind = function() {
var __method = this, args = $A(arguments), object = args.shift();
return function(){return __method.apply(object, args.concat($A(arguments)))}
}
Position={
cumulativeOffset: function(element) {
var valueT = 0, valueL = 0;
do {
valueT += element.offsetTop || 0;
valueL += element.offsetLeft || 0;
element = element.offsetParent;
} while (element);
return [valueL, valueT];
}
}
}
})()
/*
1.讀取/設置 透明度,
2.如果只傳了一個參數(shù)element,則返回 element的透明度 (0<value<1)
3.如果傳了兩個參數(shù) element和value 則把element的透明度設置為value value范圍 0-1
*/
function Opacity(element,value){
// by Go_Rush(阿舜) from http://ashun.cnblogs.com/
var ret;
if (value===undefined){ //讀取
if (!/msie/i.test(navigator.userAgent))
if (ret=element.style.opacity) return parseFloat(ret);
try{return element.filters.item('alpha').opacity/100}catch(x){return 1.0}
}else{ //設置
value=Math.min(Math.max(value,0.00001),0.999999) //這句修復一些非ie瀏覽器opacity不能設置為1的bug
if (/msie/i.test(navigator.userAgent)) return element.style.filter="alpha(opacity="+value*100+")"
return element.style.opacity=value
}
}
那么怎么設計這個Effect效果庫呢。
首先，它的入口應該簡潔。
1.一個是要使用效果的元素 element
2.另一個是將要使用什么效果 options
options應該是擴展性強的，方便用戶使用的。我們把它設計成哈稀結(jié)構(gòu)。
比如 options={x:100,y:100} 表示 將element移動到坐標 100,100
options={w:200,h:200} 表示將element的大小改變?yōu)?nbsp;width=200,height=200
他們可以重疊，也可以確省 比如 options={h:20,y:20} 這表示將element移動到 top=20的位置，而且在移動的過程中讓他的大小改變?yōu)?nbsp;height=20 ，同時，原來的left坐標和寬度都不發(fā)生改變，這是不是在做QQ的滑動效果呢？
還有控制效果的幾個關(guān)鍵因素 duration(整個效果的時間),delay(延遲幾秒才開始效果),fps(頻率快慢) 都通過options傳進來
復制代碼 代碼如下:
Effect =Class.create();
Effect.Fn =new Object();
Effect.Init =new Object();
// By Go_Rush(阿舜) from http://ashun.cnblogs.com/
Effect.prototype={
initialize: function(element,options) {
this.element = $(element);
this.options = options || {};
this.duration = (this.options.duration || 2) * 1000; //效果執(zhí)行時間
this.fps = this.options.fps || 40; //頻率
//當前步長，注： 這個變量是遞減的，當它0的時候意味著整個效果結(jié)束
this.steps = Math.floor(this.duration/this.fps);
this.maxSteps = this.steps; //整個效果的步長
this.setting = new Object();
this.timer = null;
if (this.options.delay){ // 延時處理
var _this=this;
setTimeout(function(){
_this.setup(_this);
(_this.options.onStart || Prototype.emptyFunction)(_this);
_this.run();
}, _this.options.delay*1000);
}else{
this.setup(this);
(this.options.onStart || Prototype.emptyFunction)(this);
this.run();
}
},
run: function() {
if (this.isFinished()) return (this.options.onComplete || Prototype.emptyFunction)(this);
if (this.timer) clearTimeout(this.timer);
this.duration -= this.fps;
this.steps--;
var pos=1-this.steps/this.maxSteps ; //總進度的百分比
this.loop(this,pos);
(this.options.onUpdate || Prototype.emptyFunction)(this,pos);
this.timer = setTimeout(this.run.bind(this), this.fps);
},
isFinished: function() {
return this.steps <= 0;
},
setup:function(effect){ //初始化設置所有效果單元
for(var key in Effect.Init){
if (typeof(Effect.Init[key])!="function") continue;
try{Effect.Init[key](this)}catch(x){}
}
},
loop:function(effect,pos){ //執(zhí)行所有效果單元
for(var key in Effect.Fn){
if (typeof(Effect.Fn[key])!="function") continue;
try{Effect.Fn[key](effect,pos)}catch(x){}
}
}
}
當動態(tài)效果改變的時候，比如淡出，我們讓一個element慢慢的變淡變小，并消失。
在不用效果庫的情況下 只用 element.style.display="none" 就做到了。
用效果庫后，element.style 的 透明度 opacity, 尺寸 width,height 甚至位置 left,top都發(fā)生了改變。
直到 element的大小改變?yōu)?nbsp;0或者opactiy為0的時候他才會消失 display="none"
那么，當下次再讓他出現(xiàn)的時候，怎么恢復他的原始信息呢。比如 width.height,opacity等。
在上面的代碼中 我們用 effect.setting 保存效果發(fā)生前的所有element信息.
注意以上三個自定義函數(shù) onStart,onUpdate,onComplete 他們都是通過 options傳進來的調(diào)用者自定義函數(shù)。
分別在效果發(fā)生以前，效果發(fā)生時，效果發(fā)生完畢后執(zhí)行。傳入的參數(shù)可以查閱effect的所有對象。
看到這里，細心的看官可能注意到，這個效果庫實際上什么效果都沒有做，他只是搭了一個空架子。
Effect.Init 給我們留了一個空接口供 setup方法調(diào)用，Effect.Fn也是一個空接口供loop方法調(diào)用。
下面我們要做的是擴展 Effect.Init和 Effect.Fn 來充實效果庫。
先來一個大家最熟悉的 淡入淡出
Effect.Init 里面的所有成員函數(shù)都會被 effect.setup 執(zhí)行， 這個執(zhí)行動作在效果開始之前，因此這里
適合做一些初始化的動作。 比如把一些初始信息保存到 effect.setting里面供以后使用。
Effect.Fn 里面的所有成員函數(shù)都會被 effect.loop 執(zhí)行， 這個執(zhí)行動作在效果運行中，因此這里
就要放核心效果代碼，比如計算，改變效果增量等等。
復制代碼 代碼如下:
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);
}
下面貼出可調(diào)試代碼(空效果庫和淡入淺出插件)：（可以拷貝到一個html運行，測試）
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
這一頁挺長的，明天新開一個隨筆，再把擴展的插件 size, move,zoom,color等等全部貼出來，還有一些示范代碼
JavaScript技術(shù)：如何寫一個通用的JavaScript效果庫！(1/2)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
