简介
基于jQuery实现 网站右下角 广告展示代码,基于jQuery实现网站右下角广告展示代码
代码
index.html
<!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" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <link href="css/ad.css?v=5" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/ad.js"></script> <body> <div class="float_layer" id="miaov_float_layer" style="z-index:10001;"> <h2> <b>赞助广告</b> <a id="btn_min" href="javascript:;" class="min"></a> <a id="btn_close" href="javascript:;" class="close"></a> </h2> <div class="content2"> <div class="wrap2"> 广告代码可以放自己的,支持图片,文字等. </div> </div> </div> </div> </body> </html>
css
.float_layer {border: 1px solid #aaaaaa; display:none; } .float_layer h2 { height: 25px; line-height: 25px; padding-left: 10px; font-size: 14px; color: #333; background: url(../images/title_bg.gif) repeat-x; border-bottom: 1px solid #aaaaaa; position: relative; margin: 0; } .float_layer .min { width: 21px; height: 20px; background: url(../images/min.gif) no-repeat 0 bottom; position: absolute; top: 2px; right: 25px; } .float_layer .min:hover { background: url(../images/min.gif) no-repeat 0 0; } .float_layer .max { width: 21px; height: 20px; background: url(../images/max.gif) no-repeat 0 bottom; position: absolute; top: 2px; right: 25px; } .float_layer .max:hover { background: url(../images/max.gif) no-repeat 0 0; } .float_layer .close { width: 21px; height: 20px; background: url(../images/close.gif) no-repeat 0 bottom; position: absolute; top: 2px; right: 3px; } .float_layer .close:hover { background: url(../images/close.gif) no-repeat 0 0; margin: 0;} .float_layer .content2 { height:250px; width:300px; overflow: hidden; font-size: 14px; line-height: 18px; color: #666; } .float_layer .wrap2 { padding:0 ; }
ad.js
function miaovAddEvent(oEle, sEventName, fnHandler) { if(oEle.attachEvent) { oEle.attachEvent('on'+sEventName, fnHandler); } else { oEle.addEventListener(sEventName, fnHandler, false); } } window.onload = function() { var oDiv = document.getElementById('miaov_float_layer'); var oBtnMin = document.getElementById('btn_min'); var oBtnClose = document.getElementById('btn_close'); var oDivContent = oDiv.getElementsByTagName('div')[0]; var iMaxHeight = 0; var isIE6 = window.navigator.userAgent.match(/MSIE 6/ig) && !window.navigator.userAgent.match(/MSIE 7|8/ig); oDiv.style.display = 'block'; iMaxHeight = oDivContent.offsetHeight; if (isIE6) { oDiv.style.position = 'absolute'; repositionAbsolute(); miaovAddEvent(window, 'scroll', repositionAbsolute); miaovAddEvent(window, 'resize', repositionAbsolute); } else { oDiv.style.position = 'fixed'; repositionFixed(); miaovAddEvent(window, 'resize', repositionFixed); } oBtnMin.timer = null; oBtnMin.isMax = true; oBtnMin.onclick = function() { startMove ( oDivContent, (this.isMax = !this.isMax) ? iMaxHeight : 0, function() { oBtnMin.className = oBtnMin.className == 'min' ? 'max' : 'min'; } ); }; oBtnClose.onclick = function() { oDiv.style.display = 'none'; oDiv.innerHTML = ""; }; }; function startMove(obj, iTarget, fnCallBackEnd) { if(obj.timer) { clearInterval(obj.timer); } obj.timer=setInterval ( function () { doMove(obj, iTarget, fnCallBackEnd); },30 ); } function doMove(obj, iTarget, fnCallBackEnd) { var iSpeed=(iTarget-obj.offsetHeight)/8; if(obj.offsetHeight==iTarget) { clearInterval(obj.timer); obj.timer=null; if(fnCallBackEnd) { fnCallBackEnd(); } } else { iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); obj.style.height=obj.offsetHeight+iSpeed+'px'; ((window.navigator.userAgent.match(/MSIE 6/ig) && window.navigator.userAgent.match(/MSIE 6/ig).length==2)?repositionAbsolute:repositionFixed)() } } function repositionAbsolute() { var oDiv=document.getElementById('miaov_float_layer'); var left=document.body.scrollLeft||document.documentElement.scrollLeft; var top=document.body.scrollTop||document.documentElement.scrollTop; var width=document.documentElement.clientWidth; var height=document.documentElement.clientHeight; oDiv.style.left=left+width-oDiv.offsetWidth+'px'; oDiv.style.top=top+height-oDiv.offsetHeight+'px'; } function repositionFixed() { var oDiv=document.getElementById('miaov_float_layer'); var width=document.documentElement.clientWidth; var height=document.documentElement.clientHeight; oDiv.style.left=width-oDiv.offsetWidth+'px'; oDiv.style.top=height-oDiv.offsetHeight+'px'; }