| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 505 人关注过本帖
标题:一个轻量级的JavaScript库——pj
只看楼主 加入收藏
pengju114
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2010-6-17
结帖率:0
收藏
 问题点数:0 回复次数:0 
一个轻量级的JavaScript库——pj
虽然像jQuery那样的库功能很强大,“品种”齐全,但是即使是jQuery1.4.2压缩版的也有70多kb,甚至比一个网页文件还大。而且有时候我们只需用其中一小部分的功能,不需要将整个jQuery库引进来。但我们又需要一个方便的库来协助开发网页。鉴于此,我就写了一个轻量级的库,命名为pj。很多选择器模式,方法名等引用了jQuery的模式或命名。代码如下:(内容有更新,修复了一些bug;可到http://www.下载最新的(提取码:296a4214-827b-11df-a99d-0015c55db73d),部分效果展示http://users4.)部分代码如下:

/*pj.js  version: 2.0.6
@copyright: 2010 pengju
email:pengju114@
all rights reserved*/
(function(wnd,undef){
    var doc=wnd.document;
    var pj=function(selector,context){//selector:选择器, context: 上下文
        return new pj.prototype.init(selector,context);
        };
        
    pj.prototype={
        /***真正的构造函数***/
        init:function(sel,cot){
            /****上下文默认为document****/
            cot=cot&&pj.isOBJ(cot)?cot:doc;
            /****保存元素****/
            var elems=[];
            /****当前pj对象的计时器队列****/
            this.timer={};
            
            if(pj.isOBJ(sel))elems.push(sel);
            else if(pj.isSTR(sel)){
                sel=pj.trim(sel);
                /**
                 *id选择器, 如: pj("#header"),取id为header的元素
                 */
                if(/^#\w+$/.test(sel))js.id(sel,cot,elems);
                /**
                 *标签 选择器, 如: pj("div"),取页面所有的div
                 */
                else if(/^\w+$/.test(sel))js.tag(sel,cot,elems);
                /**
                 *className选择器, 如: pj(".ClassName"), 取className为ClassName的元素
                 */
                else if(/^\.\w+$/.test(sel))(sel,cot,elems);
                /**
                 *取指定id下的所有指定元素
                 *如: pj("#header>a"), 取id为header元素下的所有a元素
                 */
                else if(/^#\w+>\w+$/.test(sel)){
                    var set=sel.split(">");
                    var t=cot.getElementById(set[0].replace(/^#/,""));
                    if(t){elems=js.tag(set[1],t,elems);}
                    }
                /**
                 *取指定标签下面所有指定标签的元素
                 *如: pj("li>a") 取页面所有li元素下面的a元素
                 */
                else if(/^\w+>\w+$/.test(sel)){
                    var tag=sel.split(">");
                    var set=cot.getElementsByTagName(tag[0]);
                    if(set.length>0){
                        for(var k=0;k<set.length;k++)
                            js.tag(tag[1],set[k],elems);
                        }
                    }
                /**
                 *按照指定的元素id、className、或者标签取元素
                 *如: pj("#header,.name,div") 取id为header的元素
                 *和className为name的元素和页面所有的div元素
                 */
                else if(/^([#|\.]?\w+,)+[#|\.]?\w+$/.test(sel)){
                    js.query(sel,cot,elems);
                    }
               
                /**
                 *根据指定的属性或者下标取元素
                 *如: pj("div[name=value]:0,3") 取页面中含有name属性并且值为value的第一和第四个元素
                 */   
                else if(/^([#|\.]?\w+,)*[#|\.]?\w+(\[(\w+=\w+,)*\w+=\w+\])?(:(\d+,)*\d+)?$/.test(sel)){
                    var a;
                    
                    /**
                     *只指定下标,没有指定属性的情况
                     *如: pj("div,#header, .name:1,3,6")
                     *先根据选择器取元素,然后只要第二、第四、第六个元素
                     */
                    if(!/\[(\w+=\w+,)*\w+=\w+\]/.test(sel)){
                        a=sel.split(":");
                        var s=[];
                        js.query(a[0],cot,s);
                        js.findex(a[1],s,elems);
                        }
                        
                    /**
                     *既指定下标,又指定属性的情况
                     *如: pj("div,#header, .name[n=v]:1,3,6")
                     *先根据选择器取元素,然后只要含有属性n并且值为v的第二、第四、第六个元素
                     */
                    else if(/:(\d+,)*\d+$/.test(sel)){
                        a=sel.split(":");
                        var all=[];
                        js.fattr(a[0],cot,all);
                        js.findex(a[1],all,elems);
                        }
                    
                    /**
                     *只指定属性,没有指定下标的情况
                     *如: pj("div,#header, .name[name=value,x=y]")
                     *先根据选择器取元素,然后只要含有属性为name和x并且值为value和y的元素
                     */
                    else {
                        js.fattr(sel,cot,elems);
                        }
                                
                    }
                    /**
                     *如果选择器是一个标签,如: <div>或者<div/>
                     *则创建元素; 创建元素后要调用appendTo方法将元素追加到页面
                     *否则无法对其进行操作
                     */
                    else if(/^<\w+(\/)?>$/.test(sel)){
                        sel=sel.replace(/\//,"");
                        var sub=sel.lastIndexOf(">");
                        sub=sel.substring(1,sub);
                        sel=doc.createElement(sub);
                        if(sel){
                            elems.push(sel);
                            }
                        }
                    /**
                     *HTML 标签
                     *如: <div>内容或者HTML标记</div>
                     *创建元素并且新建元素的innerHTML=标记间的内容;
                     *创建元素后要调用appendTo方法将元素追加到页面
                     *否则无法对其进行操作
                     */
                    else if(/^<(\S*?)[^>]*>.*?<\/\1>|<.*?\/>$/){
                        var text,tagName;
                        tagName=sel.indexOf(">");
                        text=sel.lastIndexOf("<");
                        text=sel.substring(tagName+1,text);
                        tagName=sel.substring(1,tagName);
                        tagName=doc.createElement(tagName);
                        if(tagName){
                            tagName.innerHTML=text;
                            elems.push(tagName);
                            }
                        }

                }
               
               
            return pj.merge(this,elems);//将选择原属整合到当前pj对象并返回
            },//end init
        
        /****取指定操作对象,
         ****如果不指明下标
         ****或越界则返回对
         ****象数组********
         ****如果当前操作对
         ****象只有一个则返
         ****回一个对象****/
        get: function(index){
            if(this.length==1)return this[0];
            else if(index!==undef)return this[index];
            else return Array.prototype.slice.call(this,0);
            },
        
        /****以当前所有操作
         ****对象为上下文执
         ****行fn函数并返回
         ****当前pj对象****/
        each:function(fn,arg){//arg可选
            if(pj.isFn(fn))
                for(var i=0;i<this.length;i++){
                  fn.call(this[i],arg);
                  }
            return this;
            },
            
        /****给当前对象集合添加事件监听器***
         ****参数是一个对象,this总是指向当前DOM对象*****************
         ****如 pj("selector").addListener({click:function([e]){……}})**/
        addListener:function(set){
            if(!pj.isOBJ(set))return this;
            for(var e in set){
                if(wnd.addEventListener) //非IE浏览器
                    this.each(function(){this.addEventListener(e,set[e],false);});
                else if (wnd.attachEvent)//IE浏览器
                    this.each(function(){this.attachEvent("on"+e,pj.extend(this,set[e]));});
                }
            return this;
            },
        attr:function(name/*[,value]*/){//只有一个参数则取属性值,有两个参数则设置属性值
            var set=[],arg=arguments;
            if(arg.length==1){//get attribute
                this.each(function(){set.push(this.getAttribute(name+""));});
                return this.length==1?set[0]:set;
                }
            else if(arg.length==2){//设置属性
                this.each(function(){this.setAttribute(name+"",arg[1]+"");});
                }
            return this;
            },
        //删除指定的属性
        removeAttr:function(name){
            if(name)this.each(function(){
                try{
                    this.removeAttribute(name);
                    }catch(e){
                        try{
                            delete this[name];
                            }catch(et){}
                        }
                });
            return this;
            },
        /**
         *停止当前特定的动画,参数是方法名
         *如:pj("div").hide().stop("hide")//停止hide动画
         *stop方法只能停止自己的动画而不能停止其他pj对象的动画
         *每pj('selector')一次就创建一个pj对象
         *也就是说如果对一些元素执行相反动画的话(比如在执行hide时要执行show)
         *则用一个变量来保存当前的pj对象,用这个变量来调用hide和show方法就会彼此颉颃,互不冲突
         *如: var obj=pj("div"); obj.hide(1000);setTimeout(function(){obj.show()},500)
         *在hide动画完成之前调用show方法,这样调用就不会冲突;obj会先停止自己的hide动画然后再执行show动画
         *如果是pj("div").hide(1000);setTimeout(function(){pj("div").show()},500)就会产生冲突
         */
        stop:function(name){//name: 方法名
            if(name&&this.timer[name]){
                wnd.clearInterval(this.timer[name]);
                delete this.timer[name];
                }
            return this;
            },
        
        //将元素追加到指定的DOM元素    ,如果指定的参数不是对象则加到document.body
        appendTo:function(target){
            var t=doc.body;
            if(target&&pj.isOBJ(target)&&target.nodeType&&target.nodeType==1){
                t=target;
                }
            this.each(function(){t.appendChild(this);});
            return this;
            },
        //增加className,不会覆盖原来的
        addClassName:function(name){
            if(name){
                name=" "+name;
                this.each(function(){
                    this.className+=name;
                    });
                }
            return this;
            },
        //删除指定的className,不会删除其他的
        removeClassName:function(name){
            if(name){
                this.each(function(){
                    this.className=this.className.replace(name,"");
                    });
                }
            return this;
            },
        //清除之前所有的className并设置为指定的
        setClassName:function(name){
            if(name){
                this.each(function(){
                    this.className=name;
                    });
                }
            return this;
            },
        /**
         *删除pj对象中指定的元素,下标从0开始
         *indices可以是 all、odd、even、1-5、2-[删除下标为2和以后所有的元素]字符串或者是多个数字
         *如 pj("div").cut("even").hide() [或者var obj=pj("div").cut("even");obj.hide()]
         *删除下标为偶数的元素并隐藏下标为奇数的元素
         *pj("div").cut("0-6").hide() 删除下标0-6的元素并隐藏其余的元素
         *pj("div").cut("3-").hide() 删除下标为3和之后所有的元素并隐藏其余的元素
         */   
        cut:function(indices){
            var cache=[],shift=Array.prototype.shift,args=arguments,i;
            while(this.length>0)cache.push(shift.call(this));
            if(indices=="all")return this;//删除全部
            else if(indices=="odd"||indices=="even"){//删除下标为奇数或者偶数DOM对象
                for(i=0;i<cache.length;i++){
                    if(indices=="odd"&&i%2!=0){cache[i]=undef;}
                    else if(indices=="even"&&i%2==0){cache[i]=undef;}
                    }
                }
            else if(/^\d+-(\d+)?$/.test(indices)){//形如 1-3、5-的字符串
                var end;
                indices=indices.split('-');
                indices[0]=parseInt(indices[0]);
                indices[1]=parseInt(indices[1]);
                if(indices[0]+""=="NaN")indices[0]=cache.length-1;
                if(indices[1]+""=="NaN")indices[1]=cache.length-1;
                i=Math.min(indices[0],indices[1]);
                end=Math.max(indices[0],indices[1]);
                for(;i<=end;i++){if(cache[i])cache[i]=undef;}
                }
            else if(args.length>0){//多个数字 如: 0,2,5,4
                for(i=0;i<args.length;i++){
                    if(typeof args[i]==="number"&&cache[i])cache[args[i]]=undef;
                    }
                }
            return pj.merge(this,cache);
            }
        };//end prototype
        
        //辅佐对象,仅在内部使用
        var js={
                /****s是形如#id[,#id]……的字符串******
                 ****并以c为上下文取对象,并放到a数组中*/
                id:function(s,c,a){
                    s=s.split(",");
                    var o;
                    for(var i=0;i<s.length;i++){
                        o=c.getElementById(s[i].replace(/^#/,""));
                        if(o)a.push(o);
                        }
                    /****返回对象数组****/
                    return a;
                    },

                /****s是形如 .className的字符串****/
                cname:function(s,c,a){
                    s=s.replace(/^\./,"");
                    var x=c.getElementsByTagName("*");
                    for(var i=0;i<x.length;i++){
                        if(x[i].className==s)a.push(x[i]);
                        }
                    /****返回对象数组****/
                    return a;
                    },
               
                /****t是标签****/
                tag:function(t,c,a){
                    t=c.getElementsByTagName(t);
                    /****返回对象数组****/
                    return pj.merge(a,t);
                    },
                    
                /****str是形如 #id[.className|tag]... 的字符串****/
                query:function(str,c,a){
                    str=str.split(",");
                    for(var i=0;i<str.length;i++){
                        if(/^#\w+$/.test(str[i])){a=this.id(str[i],c,a);}
                        else if(/^\w+$/.test(str[i])){a=this.tag(str[i],c,a);}
                        else if(/^\.\w+$/.test(str[i])){a=(str[i],c,a);}
                        }
                    return a;
                    },
                    
                /****通过属性过滤元素****/
                fattr:function(str,c,to){
                    str=str.split("[");
                    var attr=str[1].replace(/\]$/,"").split(",");
                    var set=[],j,b;
                    /****str[0]是形如#id|tag|.className...[attr=vlaue]的字符串****/
                    set=this.query(str[0],c,set);
                    for(var i=0;i<set.length;i++){
                        for(j=0;j<attr.length;j++){
                            b=attr[j].split("=");
                            try{
                                if(set[i].getAttribute(b[0])==b[1])to.push(set[i]);
                                }catch(e){break;}
                            }
                        }
                    },
                    
                /****通过下标过滤元素,*********************
                 ****str是形如 0,2,5……的字符串***********
                 ****并从src中选择符合条件的元素复制到to中*/
                findex:function(str,src,to){
                    str=str.split(",");
                    for(var l=0;l<str.length;l++){
                        str[l]=parseInt(str[l]);
                        if(str[l]<src.length)to.push(src[str[l]]);
                        }
                    }
            };
        
        /****将pj的prototype********
         ****赋给pj.prototype.init的prototype
         **** 这样返回的pj对象就会继承pj.prototype对象中所有的方法 ************/
        pj.prototype.init.prototype=pj.prototype;

        pj.ready=function(fn){//当页面加载完成时调用fn
                if(doc.getElementById&&doc.getElementsByTagName)fn();
                else setTimeout(function(){pj.ready(fn);},100);
                };
        
        /****target将继承方法fn*****
         ****并且fn的上下文是target*/
        pj.extend=function(target,fn){
                return function(){return fn.apply(target,arguments);};
                };
        
    /****将一个对象中的属性或方法绑定到指定对象,如果只有一个参数则绑定到pj对象
     ****也可以通过这个方法自己扩展pj对象
     ****如 pj.prototype.bind({method:function(){this.each(){alert(this.nodeName)}}[......]})
     ****这样就可以绑定多个方法到pj对象作用域上,而且所有的pj对象都可以调用
     ****上面的方法可以这样调用: pj("div").method()**/   
    pj.bind=pj.prototype.bind=function(){
        var tar,src;
        if(arguments.length>1){
            src=arguments[1];
            tar=arguments[0];
            }
        else if(arguments.length==1){
            tar=this;
            src=arguments[0];
            }
        else {
            tar={};
            src={};
            }
        for(var e in src){tar[e]=src[e];}
        return tar;
        };   
        
   
   
    /******************************内容太多,删了部分************************************/
        
        
        pj.prototype.bind({
            getStyle:function(name){//取元素样式值
                var st=[];
                this.each(function(){st.push(pj.getStyle(this,name));});   
                //如果对象集合长度为1则返回属性值,否则返回属性值数组
                return st.length==1?st[0]:st;
                 },
            
            /****设置元素属性,source为对象{color:"red",display:"block"[...]}
             ****或者source为属性名,value为值****/
            setStyle:function(source/*,value*/){
                if(arguments.length>1&&!pj.isOBJ(source)){
                    var name=arguments[0];
                    source={};
                    source[name]=arguments[1];
                    }
                if(pj.isOBJ(source))
                    this.each(function(){pj.setStyle(this,source);});

                return this;
                }
            });
            
/******************************内容太多,删了部分**************************************/
        
        
        function now(){
            return (new Date()).getTime();
            }
        
        /**
         *通过当前操作对象保存自身的最初宽度和高度,而且只设置一次,不会删除
         */
        function check(cur){
            if(!cur.getAttribute("pjheight"))cur.setAttribute("pjheight",pj.wh(cur,"height"));
            if(!cur.getAttribute("pjwidth"))cur.setAttribute("pjwidth",pj.wh(cur,"width"));
            }
        function setDisplay(cur){
            //设置最初的display,为none则设置为block,不会删除
            if(!cur.getAttribute("pjdisplay")){
                var display=pj.getStyle(cur,"display");
                cur.setAttribute("pjdisplay",display=="none"?"block":display);
                }
            }
            
        
        //实现动画每个属性的渲染器 ,attr属性名、value: 最终值
        function render(target,attr,value,duration){
            
            this.t=target;//渲染对象
            this.name=pj.trim(attr);//属性名
            this.duration=duration; //效果时长
            this.unit="px";            //默认单位
            var v,overflow="",pos="";
            var display=pj.getStyle(this.t,"display");
        
            if(/^left$/i.test(this.name)||/^top$/i.test(this.name)){
                pos="absolute";    //left、top动画则设置position为absolute
                var left=pj.x(this.t),top=pj.y(this.t);
                if(/^left$/i.test(this.name))v=left;
                else v=top;
                pj.setStyle(this.t,{"left":left+this.unit,"top":top+this.unit});
                }
            else if(/^width$/i.test(this.name)||/^height$/i.test(this.name)){
                overflow="hidden";
                if(/^width$/i.test(this.name))v=pj.wh(this.t,"width");
                else v=pj.wh(this.t,"height");
                //height或者width动画并且可见则设置display为block
                display=display=="none"?display:"block";
                }
            else v=parseInt(pj.getStyle(this.t,this.name));
            this.begin=(v+""=="NaN")?0:v;//开始值
            
            if(typeof value==="number")this.span=value-this.begin;//变化区间
            
            else if(pj.isSTR(value)){
                value=pj.trim(value);
                var spt=/^([+-]=)?([\d+-.]+)(.*)$/.exec(value);//分析类似于 +=200px、-=150%的字符串
                if(spt[1]=="+=")this.span=parseInt(spt[2]);
                else if(spt[1]=="-=")this.span=-parseInt(spt[2]);
                else this.span=parseInt(spt[2])-this.begin;
                if(spt[3]&&spt[3]!="")this.unit=spt[3];
                }
            
            else this.span=0;
            
            pj.setStyle(this.t,{"position":pos,"overflow":overflow,"display":display});

            this.next=function(start,currentTime){    //下一帧动画
                var val=currentTime-start;    //    经过的时间
                val=Math.min(val,this.duration)/this.duration;//动画的进度
                /**** sin曲线。从-PI/2 到PI/2 ,变化区间 0-2 ****/
                /**** 除2确保变化区间为0-1 *********************/
                val=(1+Math.sin((-Math.PI*0.5)+val*Math.PI))/2;/*使得动画在两端慢,在中间快*/
                val=val*this.span;
                val=this.begin+val;
                try{
                    this.t.style[this.name]=val+this.unit;//有时值小于0会发生异常
                    }catch(e){
                        //this.t.style[this.name]=this.begin+this.span+this.unit;
                        }
                };
            }
            
            function opacity(target,value,duration){
                this.t=target;//渲染对象
                this.duration=duration;
                var v=parseFloat(pj.getStyle(this.t,"opacity"));//取当前透明度
                v=this.t.filters?v:v*100;
                if(!this.t.getAttribute("pjopacity")){
                            this.t.setAttribute("pjopacity",v);
                    }
                    
                this.begin=v;
               
                if(typeof value==="number")this.span=value-this.begin;
               
                else if(pj.isSTR(value)){
                    value=pj.trim(value);
                    var spt=/^([+-]=)?([\d+-.]+)(.*)$/.exec(value);
                    if(spt[1]=="+=")this.span=parseInt(spt[2]);
                    else if(spt[1]=="-=")this.span=-parseInt(spt[2]);
                    else this.span=parseInt(spt[2])-this.begin;
                    }

                else this.span=0;//不做任何事

                this.next=function(start,currentTime){
                    var val=currentTime-start;
                    val=Math.min(val,this.duration)/this.duration;
                    val=val*this.span;
                    val=this.begin+val;
                    pj.setOpacity(this.t,val);
                    };
                }

               
            pj.prototype.bind({//绑定效果方法
            
                /****自定义动画  **************************************************
                 **** styleSet:属性集合[如:{left:"+=80px",top:"-=33",width:330}] **
                 **** duration:效果时长 *******************************************
                 **** fn:完成后的回调函数 *****************************************
                 **** hide:完成后是否隐藏元素 **************************************
                 **** 如: pj("#R_left").animate({width:100,left:-10,top:50},800)*/
                animate:function(styleSet,duration,fn,hide){
                    var i,j=0;               
                    var operator={};//保存进行加工对象的集合(操作集合)
                    var name=arguments[4]||"animate"; //动画方法名,方便stop
                    if(this.timer[name])return this;
                    duration=duration||400;//默认效果时长为400毫秒
                    fn=fn||function(){};
                    var v,cur;
                    for(i=0;i<this.length;i++){
                        setDisplay(this[i]);    //设置最初display
                        check(this[i]);            //设置最初高度和宽度
                        for(var e in styleSet){
                            v=pj.isArray(styleSet[e])?styleSet[e][i]:styleSet[e];//属性值可以是数组
                            if(/opacity/i.test(e)){//分开处理目的是为了提高速度,减少判断
                                operator[j++]=new opacity(this[i],v,duration);
                                }
                            else{
                                operator[j++]=new render(this[i],e,v,duration);
                                }
                            }
                        }
                    
                    /****start:动画开始的时间,currentTime:当前时间****/
                    var start=now(),currentTime;
                    cur=this;//当前pj对象的引用

                    this.timer[name]=wnd.setInterval(function(){
                        currentTime=now();    //每进行一帧则取当前时间
                        for(j in operator){//执行动画的下一帧
                            operator[j].next(start,currentTime);
                            }
                           
                        if(currentTime-start>=duration){//动画完成
                            wnd.clearInterval(cur.timer[name]);//清除timer
                            delete cur.timer[name];            
                            if(hide)cur.setStyle({display:"none"});
                            else{        //完成后不隐藏则恢复原来的display
                                cur.each(function(){
                                  this.style.display=this.getAttribute("pjdisplay")||"block";
                                  });
                                }
                            fn(cur);/****执行回调函数****/
                            }
                        },15);//每15毫秒执行一帧动画
                    
                    return this;
                    },//end animate
               
                /**
                 *参数都可选;h:最终位置或者是类似于+=22或-=55等的字符串
                 *如果元素的高度(或者宽度)需要随需要变化,比如一个DIV要动态地接收来自Ajax的返回内容
                 *则在动画之前先将pjheight(或者pjwidth)属性删除,然后添加内容,再进行动画
                 *用法类似于 pjObj.removeAttr("pjheight").setStyle({"height":"auto"}).get(0).innerHTML=content;   
                 *pjObj.slideDown();
                 */
                slideDown:function(duration,h,fn){
                    //如果当前pj对象正在slideDown则返回
                    if(this.timer["slideDown"])return this;
                    var vs=[];//保存各个元素的最初高度
                    
                    /**
                     *如果对一些元素执行相反动画的话(比如在执行slideDown时要执行slideUp)
                     *则用一个变量来保存当前的pj对象,用这个变量来调用slideDown和slideUp方法
                     *就会彼此颉颃,互不冲突  如: var obj=pj("div");
                     *obj.slideDown(1000);setTimeout(function(){obj.slideUp()},500)
                     *在slideDown动画完成之前调用slideUp方法,这样调用就不会冲突;
                     *obj会先停止自己的slideDown动画然后再执行slideUp动画
                     */
                        return this.stop("slideUp").each(function(){
                        check(this);
                        setDisplay(this);
                        vs.push(parseInt(this.getAttribute("pjheight")));
                        if(pj.getStyle(this,"display")=="none")
                            pj.setStyle(this,{"height":"0px","display":"block"});
                        }).animate({"height":h||vs},duration,fn,false,"slideDown");
                    },
                    
                //参数都可选;h:最终位置或者是类似于+=22或-=55等的字符串   
                slideUp:function(duration,h,fn){
                    if(this.timer["slideUp"])return this;//如果当前pj对象正在slideUp则返回
                    h=h||0;
                    return this.stop("slideDown").animate({"height":h},duration,fn,h<=0,"slideUp");
                    },
                    
/************************内容太多,删了部分**************************************/
                //参数都可选
                hide:function(duration,fn){
                    if(this.timer["hide"])return this;
                    /**
                     *如果对一些元素执行相反动画的话(比如在执行hide时要执行show)
                     *则用一个变量来保存当前的pj对象,用这个变量来调用hide和show方法就会彼此颉颃,互不冲突
                     *如: var obj=pj("div"); obj.hide(1000);setTimeout(function(){obj.show()},500)
                     *在hide动画完成之前调用show方法,这样调用就不会冲突;
                     *obj会先停止自己的hide动画然后再执行show动画
                     *如果是pj("div").hide(1000);setTimeout(function(){pj("div").show()},500)
                     *就会产生冲突
                     */
                    return this.stop("show").each(
                        function(){
                        //pjopacity只设置一次而且不会删除
                        if(!this.getAttribute("pjopacity")){//用当前DOM对象记录自己最初的opacity值
                            var v=parseFloat(pj.getStyle(this,"opacity"));
                            this.setAttribute("pjopacity",this.filters?v:v*100);
                            }
                        }).animate({"width":0,"height":0,"opacity":0},duration,fn,true,"hide");
                    },
                    
                //参数都可选
                show:function(duration,fn){
                    if(this.timer["show"])return this;
                    var opu=[],w=[],h=[],value;
                    return this.stop("hide").each(
                        function(){
                        check(this);        //设置pjwidth和pjheight
                        setDisplay(this);
                        w.push(parseInt(this.getAttribute("pjwidth")));
                        h.push(parseInt(this.getAttribute("pjheight")));
                        value=this.getAttribute("pjopacity")
                        if(value){
                            value=parseFloat(value);
                            }
                        else{
                            value=parseFloat(pj.getStyle(this,"opacity"));
                            value=this.filters?value:value*100;
                            this.setAttribute("pjopacity",value);//pjopacity只设置一次而且不会删除
                            }
                        opu.push(value)

                        if(pj.getStyle(this,"display")=="none")
                            pj.setStyle(this,{"width":"0px","height":"0px","opacity":0,"display":"block"});
                        }).animate({"width":w,"height":h,"opacity":opu},duration,fn,false,"show");
                    }
/******************************内容太多,删了部分************************************/

                });

    /****将pj映射到全局对象上****/
    wnd.pj=pj;
    })(window);
搜索更多相关主题的帖子: 轻量级 JavaScript 
2010-06-28 14:21
快速回复:一个轻量级的JavaScript库——pj
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.020719 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved