如何写一个通用的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];