如何写一个通用的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]; 
 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.如果只传了一个参数element,则返回 element的透明度 (0<value<1) 
 3.如果传了两个参数 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 
 } 
}

更多相关教程请访问 JavaScript视频教程