如何写一个通用的JavaScript效果库-js教程-PHP中文网

如何写一个通用的JavaScript效果库

PHPz

发布： 2016-05-16 19:15:10

原创

1187人浏览过

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的透明度等这些基础工作。

移动端无限滚动加载瀑布流

里面有2个文件夹。其中这个文件名是:finishing，是我项目还没有请求后台的数据的模拟写法。请求后台数据之后，瀑布流的js有一点点变化，放在文件名是：finished。变化在于需要穿参数到后台，和填充的内容都用后台的数据填充。看自己项目需求来。由于chrome模拟器是不允许读取本地文件json的，所以如果你要进行测试，在hbuilder打开项目就可以看到效果啦，或者是火狐浏览器。

查看详情

立即学习“Java免费学习笔记（深入）”；

代码如下:

/*  
    这个函数的代码来自 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视频教程