js 左右悬浮对联广告特效代码
程序员文章站
2023-12-03 08:23:34
js制作web网页左右悬浮广告特效。引用：复制代码 代码如下:2、...
js制作web网页左右悬浮广告特效。
引用：
复制代码 代码如下:
<script src="js/ad.js" type="text/javascript"></script>
2、页面调用
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>js制作web网页左右悬浮广告特效_www.jb51.net</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>
<script src="js/ad.js" type="text/javascript"></script>
</body>
</html>
3、js悬浮广告代码 ad.js
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))}};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)}};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}};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)}}};
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.plchome.org"><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="https://www.jb51.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);
完成。