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是文档的根节点也是火狐等可以获取宽高的途径，document.body是文档的body子节点也是谷歌浏览器等可以获取宽高的途径，三种判定达到主流兼容。 getScroll： 获取浏览器被卷去的宽高，window.pageYOffset是netscape属性，老浏览器可以通过此获取到卷曲的宽高，document.documentElement是文档的根节点也是火狐等可以获取宽高的途径，document.body是文档的body子节点也是谷歌浏览器等可以获取宽高的途径，三种判定达到主流兼容。 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方法。
左右飘窗代码研读
时间： 2024-10-08 13:55:23