Paste_Image.png

//遮罩
#tinymask{
    position:absolute; 
    top:0; left:0; 
    height:100%; 
    width:100%;
    background:#000000;
     z-index:1500;
    opacity: 0.8; 
    display: block; 
}
//最外層div
.zxx_out_box{
  width:70%; 
  min-width:700px; 
  border-left:1px solid white; 
  border-right:1px solid white; 
  margin:0 auto;
}

1.獲取全局對象,窗口的信息

var TINY={};

scrollWidth
 是對象的實際內容的寬，不包邊線寬度，會隨對象中內容的多少改變（內容多了可能會改變對象的實際寬度）。 
clientWidth  
是對象可見的寬度，不包滾動條等邊線，會隨窗口的顯示大小改變。  
offsetWidth  
是對象的可見寬度，包滾動條等邊線，會隨窗口的顯示大小改變。  

主要就這五項

TINY.page=function(){
    return{
        top:function(){return document.body.scrollTop||document.documentElement.scrollTop},
        width:function(){return self.innerWidth||document.documentElement.clientWidth},
        height:function(){return self.innerHeight||document.documentElement.clientHeight},
        theight:function(){
            var d=document, b=d.body, e=d.documentElement;
            return Math.max(Math.max(b.scrollHeight,e.scrollHeight),Math.max(b.clientHeight,e.clientHeight))
        },
        twidth:function(){//窗口最大，主要比較了可見區域|超出可見區域
            var d=document, b=d.body, e=d.documentElement;
            return Math.max(Math.max(b.scrollWidth,e.scrollWidth),Math.max(b.clientWidth,e.clientWidth))
        }
    }
}();

2.

var TINY={};

function T$(i){return document.getElementById(i)}

TINY.box=function(){
    var p,m,b,fn,ic,iu,iw,ih,ia,f=0;
    return{
        show:function(c,u,w,h,a,t){//t事件，w、h寬高，u是url，a、是否定時
            if(!f){
                p=document.createElement('div'); p.id='tinybox';
                m=document.createElement('div'); m.id='tinymask';
                b=document.createElement('div'); b.id='tinycontent';
                document.body.appendChild(m); document.body.appendChild(p); p.appendChild(b);
                m.onclick=TINY.box.hide; window.onresize=TINY.box.resize; f=1
            }
            if(!a&&!u){
                p.style.width=w?w+'px':'auto'; p.style.height=h?h+'px':'auto';
                p.style.backgroundImage='none'; b.innerHTML=c
            }else{
                b.style.display='none'; p.style.width=p.style.height='100px'
            }
            this.mask();
            ic=c; iu=u; iw=w; ih=h; ia=a; this.alpha(m,1,80,3);//
            //if(t){setTimeout(function(){TINY.box.hide()},1000*t)}
        },
        fill:function(c,u,w,h,a){
            if(u){
                p.style.backgroundImage='';
                var x=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
                x.onreadystatechange=function(){
                    if(x.readyState==4&&x.status==200){TINY.box.psh(x.responseText,w,h,a)}
                };
                x.open('GET',c,1); x.send(null)
            }else{
                this.psh(c,w,h,a)
            }
        },
        psh:function(c,w,h,a){
            if(a){
                if(!w||!h){
                    var x=p.style.width, y=p.style.height; b.innerHTML=c;
                    p.style.width=w?w+'px':''; p.style.height=h?h+'px':'';
                    b.style.display='';
                    w=parseInt(b.offsetWidth); h=parseInt(b.offsetHeight);
                    b.style.display='none'; p.style.width=x; p.style.height=y;
                }else{
                    b.innerHTML=c
                }
                this.size(p,w,h,4)
            }else{
                p.style.backgroundImage='none'
            }
        },
        //隱藏
        hide:function(){
            TINY.box.alpha(p,-1,0,5)
        },
        //如果窗口大小改變，重新計算位置和遮罩大小
        resize:function(){
            TINY.box.pos(); TINY.box.mask()
        },
        //設置遮罩的大小，即屏幕的最大寬高
        mask:function(){
            m.style.height=TINY.page.theight()+'px';
            m.style.width=''; m.style.width=TINY.page.twidth()+'px'
        },
        //有點意思
        pos:function(){
            var t=(TINY.page.height()/2)-(p.offsetHeight/2); t=t<10?10:t;
            p.style.top=(t+TINY.page.top())+'px';//注意還得加入滾動條的位置
            //下面獲取距離左邊的位置，offsetWidth元素寬度，包括邊框等
            p.style.left=(TINY.page.width()/2)-(p.offsetWidth/2)+'px'
        },
        //?
        alpha:function(e,d,a,s){//1,80,3隱藏，d，1顯示、-1隱藏，a最終的透明度
            clearInterval(e.ai);
            if(d==1){
                e.style.opacity=0; e.style.filter='alpha(opacity=0)';
                e.style.display='block'; this.pos()
            }
            e.ai=setInterval(function(){TINY.box.twalpha(e,a,d,s)},20)
        },
        twalpha:function(e,a,d,s){//a最終的透明度80,1,3
            var o=Math.round(e.style.opacity*100);//o透明度
            if(o==a){
                clearInterval(e.ai);
                if(d==-1){
                    e.style.display='none';
                    e==p?TINY.box.alpha(m,-1,0,3):b.innerHTML=p.style.backgroundImage=''
                }else{
                    e==m?this.alpha(p,1,100,5):TINY.box.fill(ic,iu,iw,ih,ia)
                }
            }else{
                var n=o+Math.ceil(Math.abs(a-o)/s)*d;//a：80，o：0，s:3,d:1
                e.style.opacity=n/100; e.style.filter='alpha(opacity='+n+')'
            }
        },
        size:function(e,w,h,s){
            e=typeof e=='object'?e:T$(e); clearInterval(e.si);
            var ow=e.offsetWidth, oh=e.offsetHeight,
            wo=ow-parseInt(e.style.width), ho=oh-parseInt(e.style.height);
            var wd=ow-wo>w?-1:1, hd=(oh-ho>h)?-1:1;
            e.si=setInterval(function(){TINY.box.twsize(e,w,wo,wd,h,ho,hd,s)},20)
        },
        twsize:function(e,w,wo,wd,h,ho,hd,s){
            var ow=e.offsetWidth-wo, oh=e.offsetHeight-ho;
            if(ow==w&&oh==h){
                clearInterval(e.si); p.style.backgroundImage='none'; b.style.display='block'
            }else{
                if(ow!=w){e.style.width=ow+(Math.ceil(Math.abs(w-ow)/s)*wd)+'px'}
                if(oh!=h){e.style.height=oh+(Math.ceil(Math.abs(h-oh)/s)*hd)+'px'}
                this.pos()
            }
        }
    }
}();