如何寫一個通用的JavaScript效果庫!(1/2)
2024-09-06 12:42:40
供稿:網友
JavaScript的動態效果最基本的是 動態改變大小,移動位置,改變透明度,改變顏色等等。
而其他一些比較炫的效果無非是對這些最基本效果的組合和運用。
現在網上已經有很多很不錯的優秀Javascript庫或者效果庫,我們是否有必要再造輪子呢?
放眼望去,Yahoo UI, 基于Prototype的scriptaculous, Rico, JQuery, Dojo,還有很多很多。
這些庫都帶有很不錯很優秀的動態效果。我們可以直接使用。
但是對于一些中小型項目來說,只是偶爾用到一兩個特效,就沒有必要引用整個框架,要知道
這些家伙體積都不小哦. prototype.js 50K, scripttaculous的 effects.js也有40-50k dojo,yui 更大。
在大多數情況下我們需要一個小巧獨立(300行代碼以內),無侵入性的效果庫。.即使有現有的輪子,
我們不但要學會怎么使用輪子,更要學會如何親手造一個輪子。
基于以上原因,我們今天來重寫一個靈活的,擴展性強的,小巧的,跨瀏覽器的動態效果庫。
考慮到prototype.js 用戶群的廣泛性,我的部分代碼引用了prototype.js,當然,我說過 ,我們要做一個獨立
的效果庫,即使在沒有prototype.js的情況下,也要讓代碼正常工作。
先做一些準備工作。下面這些代碼是任何效果庫中必不可少的,因為它負責一些類似取位置坐標,
設置,獲取element的透明度等這些基礎工作。
代碼:
代碼如下:
/*
這個函數的代碼來自 Prototype.js http://prototype.conio.net/
如果頁面引用了prototype.js ,則可以刪除下面這個函數,
當然,即使不刪除也沒關系,因為作了簡單的兼容性判斷
*/
(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];