首页 > 开发 > JS > 正文

如何写一个通用的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]; 
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表