js 左右悬浮对联广告特效代码
js制作web网页左右悬浮广告特效。
引用:
<scriptsrc="js/ad.js"type="text/javascript"></script>
2、页面调用
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-CN"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>js制作web网页左右悬浮广告特效_www.nhooo.com</title> <style> body{font-family:Arial,Helvetica,sans-serif,"宋体";font-size:12px;height:2000px;color:#667382} *{padding:0px;margin:0px;} ul{margin:0px;padding:0px;} li{list-style-type:none;margin:0px;padding:0px;} .fl{float:left;} .fr{float:right;} .cl{clear:both;} .zz{margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:auto;} .tc{text-align:center;} .jiac{font-weight:bold;} .cur{cursor:pointer;} img{border:0px;} </style> </head> <body> <scriptsrc="js/ad.js"type="text/javascript"></script> </body> </html>
3、js悬浮广告代码ad.js
varbrowser={ie6:function(){return((window.XMLHttpRequest==undefined)&&(ActiveXObject!=undefined))},getWindow:function(){varmyHeight=0;varmyWidth=0;if(typeof(window.innerWidth)=='number'){myHeight=window.innerHeight;myWidth=window.innerWidth}elseif(document.documentElement){myHeight=document.documentElement.clientHeight;myWidth=document.documentElement.clientWidth}elseif(document.body){myHeight=document.body.clientHeight;myWidth=document.body.clientWidth}return{'height':myHeight,'width':myWidth}},getScroll:function(){varmyHeight=0;varmyWidth=0;if(typeof(window.pageYOffset)=='number'){myHeight=window.pageYOffset;myWidth=window.pageXOffset}elseif(document.documentElement){myHeight=document.documentElement.scrollTop;myWidth=document.documentElement.scrollLeft}elseif(document.body){myHeight=document.body.scrollTop;myWidth=document.body.scrollLeft}return{'height':myHeight,'width':myWidth}},getDocWidth:function(D){if(!D)varD=document;returnMath.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)varD=document;returnMath.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))}};vardom={ID:function(id){vartype=typeof(id);if(type=='object')returnid;if(type=='string')returndocument.getElementById(id);returnnull},insertHtml:function(html){varfrag=document.createDocumentFragment();vardiv=document.createElement("div");div.innerHTML=html;for(vari=0,ii=div.childNodes.length;i<ii;i++){frag.appendChild(div.childNodes[i])}document.body.insertBefore(frag,document.body.firstChild)}};varmyEvent={add:function(element,type,handler){varele=dom.ID(element);if(!ele)return;if(ele.addEventListener)ele.addEventListener(type,handler,false);elseif(ele.attachEvent)ele.attachEvent("on"+type,handler);elseele["on"+type]=handler},remove:function(element,type,handler){varele=dom.ID(element);if(!ele)return;if(ele.removeEventListener)ele.removeEventListener(type,handler,false);elseif(ele.detachEvent)ele.detachEvent("on"+type,handler);elseele["on"+type]=null}};varposition={rightCenter:function(id){varid=dom.ID(id);varie6=browser.ie6();varwin=browser.getWindow();varele={'height':id.clientHeight,'width':id.clientWidth};if(ie6){varscrollBar=browser.getScroll()}else{varscrollBar={'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);varfun=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){varid=dom.ID(id);varie6=browser.ie6();varwin=browser.getWindow();varele={'height':id.clientHeight,'width':id.clientWidth};if(ie6){varscrollBar=browser.getScroll()}else{varscrollBar={'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);varfun=function(){position.leftCenter(id)};if(browser.ie6()){myEvent.add(window,'scroll',fun);myEvent.add(window,'resize',fun)}else{myEvent.add(window,'resize',fun)}}}; functionad_left(){ varhtml; html='<divid="ad_left"style="position:absolute;width:130px;height:300px;z-index:10001"><astyle="position:absolute;top:-15px;left:0;"href="javascript:void(0);"onclick="document.getElementById(\'ad_left\').style.display=\'none\'">关闭</a><ahref="http://www.plchome.org"><imgsrc="images/ad.jpg"width="130"height="300"/></a></div>'; dom.insertHtml(html);position.floatLeftCenter('ad_left'); } functionad_right(){ varhtml; html='<divid="ad_right"style="position:absolute;width:130px;height:300px;z-index:10001"><astyle="position:absolute;top:-15px;right:0;"href="javascript:void(0);"onclick="document.getElementById(\'ad_right\').style.display=\'none\'">关闭</a><ahref="https://www.nhooo.com"><imgsrc="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);
完成。