左右飄窗代碼研讀

標籤：des   style   blog   http   color   java   os   io   

var browser={    ie6:function(){        return((window.XMLHttpRequest==undefined)&&(ActiveXObject!=undefined))    },    getWindow:function(){        var myHeight=0;        var myWidth=0;        if(typeof(window.innerWidth)==‘number‘){            myHeight=window.innerHeight;            myWidth=window.innerWidth        }else if(document.documentElement){            myHeight=document.documentElement.clientHeight;            myWidth=document.documentElement.clientWidth        }else if(document.body){            myHeight=document.body.clientHeight;            myWidth=document.body.clientWidth        }        return{‘height‘:myHeight,‘width‘:myWidth}    },    getScroll:function(){        var myHeight=0;        var myWidth=0;        if(typeof(window.pageYOffset)==‘number‘){            myHeight=window.pageYOffset;            myWidth=window.pageXOffset        }else if(document.documentElement){            myHeight=document.documentElement.scrollTop;            myWidth=document.documentElement.scrollLeft        }else if(document.body){            myHeight=document.body.scrollTop;            myWidth=document.body.scrollLeft        }        return{‘height‘:myHeight,‘width‘:myWidth}    },    getDocWidth:function(D){        if(!D)            var D=document;        return Math.max(Math.max(D.body.scrollWidth,D.documentElement.scrollWidth),Math.max(D.body.offsetWidth,D.documentElement.offsetWidth),Math.max(D.body.clientWidth,D.documentElement.clientWidth))    },    getDocHeight:function(D){        if(!D)            var D=document;        return Math.max(Math.max(D.body.scrollHeight,D.documentElement.scrollHeight),Math.max(D.body.offsetHeight,D.documentElement.offsetHeight),Math.max(D.body.clientHeight,D.documentElement.clientHeight))    }};

 

browser對象內：
　　ie6：ActiveXObject是ie瀏覽器的標誌，window.XMLHttpRequest是IE7以前的建立XMLHttpRequest對象的方式，雙重判定ie6.
　　getWindow： 擷取瀏覽器寬高，window.innerWidth是netscape屬性，部分瀏覽器可以通過此擷取到瀏覽器寬高，document.documentElement是文檔的根節點也是Firefox等可以擷取寬高的途徑，document.body是文檔的body子節點也是Google瀏覽器等可以擷取寬高的途徑，三種判定達到主流相容。
　　getScroll： 擷取瀏覽器被捲去的寬高，window.pageYOffset是netscape屬性，老瀏覽器可以通過此擷取到捲曲的寬高，document.documentElement是文檔的根節點也是Firefox等可以擷取寬高的途徑，document.body是文檔的body子節點也是Google瀏覽器等可以擷取寬高的途徑，三種判定達到主流相容。
　　getDocWidth： 擷取文檔寬，通過判定scrollWidth,offsetWidth,clientWidth在documentElement與body兩種節點下的最寬最高高度來決定。
　　getDocHeight: 擷取文檔高，通過判定scrollWidth,offsetWidth,clientWidth在documentElement與body兩種節點下的最寬最高高度來決定。

var dom={    ID:function(id){        var type=typeof(id);        if(type==‘object‘)            return id;        if(type==‘string‘)            return document.getElementById(id);        return null    },    insertHtml:function(html){        var frag=document.createDocumentFragment();        var div=document.createElement("div");        div.innerHTML=html;        for(var i=0,ii=div.childNodes.length;i<ii;i++){            frag.appendChild(div.childNodes[i])        }        document.body.insertBefore(frag,document.body.firstChild)    }};

dom對象內：

　　id:擷取對象的id名

　　insertHtml: 插入html的動作，輸入html代碼，在body後append要加入的內容

var myEvent={    add:function(element,type,handler){        var ele=dom.ID(element);        if(!ele)            return;        if(ele.addEventListener)            ele.addEventListener(type,handler,false);        else if(ele.attachEvent)            ele.attachEvent("on"+type,handler);        else ele["on"+type]=handler    },    remove:function(element,type,handler){        var ele=dom.ID(element);        if(!ele)            return;        if(ele.removeEventListener)            ele.removeEventListener(type,handler,false);        else if(ele.detachEvent)            ele.detachEvent("on"+type,handler);        else ele["on"+type]=null    }};

myEvent對象：

　　add：綁定監聽事件，addEventListener和attachEvent，前者是W3C的js綁定事件標準，後者是IE瀏覽器的js綁定事件標準，如果兩者都不符合，老瀏覽器類型的話，用傳統綁定方式。

　　remove：解除綁定監聽事件，removeEventListener和detachEvent，前者是W3C的js解除綁定事件標準，後者是IE瀏覽器的js解除綁定事件標準，如果兩者都不符合，老瀏覽器類型的話，用傳統綁定方式。

 

var position={    rightCenter:function(id){        var id=dom.ID(id);        var ie6=browser.ie6();        var win=browser.getWindow();        var ele={            ‘height‘:id.clientHeight,            ‘width‘:id.clientWidth        };        if(ie6){            var scrollBar=browser.getScroll()        }else{            var scrollBar={                ‘height‘:0,                ‘width‘:0            };            id.style.position=‘fixed‘        }        ele.top=parseInt((win.height-ele.height)/2+scrollBar.height);        id.style.top=ele.top+‘px‘;        id.style.right=‘3px‘    },    floatRightCenter:function(id){        position.rightCenter(id);        var fun=function(){            position.rightCenter(id)        };        if(browser.ie6()){            myEvent.add(window,‘scroll‘,fun);            myEvent.add(window,‘resize‘,fun)        }else{            myEvent.add(window,‘resize‘,fun)        }    },    leftCenter:function(id){        var id=dom.ID(id);        var ie6=browser.ie6();        var win=browser.getWindow();        var ele={            ‘height‘:id.clientHeight,            ‘width‘:id.clientWidth        };        if(ie6){            var scrollBar=browser.getScroll()        }else{            var scrollBar={                ‘height‘:0,                ‘width‘:0            };            id.style.position=‘fixed‘        }        ele.top=parseInt((win.height-ele.height)/2+scrollBar.height);        id.style.top=ele.top+‘px‘;        id.style.left=‘3px‘    },    floatLeftCenter:function(id){        position.leftCenter(id);        var fun=function(){            position.leftCenter(id)        };        if(browser.ie6()){            myEvent.add(window,‘scroll‘,fun);            myEvent.add(window,‘resize‘,fun)        }else{            myEvent.add(window,‘resize‘,fun)        }    }};

 

position對象：
　　rightCenter： 右側飄窗，綁定右側飄窗的參數，目前寫法是飄窗位於瀏覽器的置中處
　　floatRightCenter: 視窗滾動或者放縮後觸發rightCenter
　　leftCenter: 左側飄窗，綁定左側飄窗的參數，目前寫法是飄窗位於瀏覽器的置中處
　　floatLeftCenter： 視窗滾動或者放縮後觸發leftCenter

function ad_left(){    var html;    html = ‘<div id="ad_left" style="position:absolute;width:130px;height:300px;z-index:10001"><a style="position:absolute;top:-15px;left:0;" href="javascript:void(0);" onclick="document.getElementById(\‘ad_left\‘).style.display=\‘none\‘">關閉</a><a href="http://www.xwcms.net"><img src="images/ad.jpg" width="130" height="300" /></a></div>‘;    dom.insertHtml(html);    position.floatLeftCenter(‘ad_left‘);}function ad_right(){    var html;    html = ‘<div id="ad_right" style="position:absolute;width:130px;height:300px;z-index:10001"><a style="position:absolute;top:-15px;right:0;" href="javascript:void(0);" onclick="document.getElementById(\‘ad_right\‘).style.display=\‘none\‘">關閉</a><a href="http://www.xwcms.net"><img src="images/ad.jpg" width="130" height="300" /></a></div>‘;    dom.insertHtml(html);    position.floatRightCenter(‘ad_right‘);}myEvent.add(window,‘load‘,ad_left);myEvent.add(window,‘load‘,ad_right);

ad_left: 左側廣告所有內容參數及操作。

ad_right: 右側廣告所有內容參數及操作。

最後是調用ad_left與ad_right方法。