简介
基于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';
}
下载地址
点击下载版权声明：本站所有文章和资源使用CC BY-NC-SA 4.0协议授权发布 , 转载应当以相同方式注明文章来自“SeaOMC.COM->基于jQuery实现网站右下角广告展示代码！在下边可以分享本文哦！
