网站右下角悬浮视窗可关闭广告代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是网站右下角悬浮视窗可关闭广告代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(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=gb2312" />
<meta name="keywords" content="JS代码,悬浮漂浮,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为网站右下角悬浮视窗可关闭广告代码，属于站长常用代码" />
<title>网站右下角悬浮视窗可关闭广告代码</title>
<link href="css/xixi.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/lrtk.js"></script>
</head>
<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="content">
        <div class="wrap"> 
        <a href="#"><img src="images/zheye_300x250.jpg" width="300" height="250" /></a>
        </div>
    </div>
</div>
<!-- 代码 结束 -->

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

JS代码(lrtk.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';
}

CSS代码(xixi.css):

*{padding:0;margin:0;}
.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;}
.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;}
.float_layer .content{height:250px;width:300px;overflow:hidden;font-size:14px;line-height:18px;color:#666;}
.float_layer .wrap2{padding:0}

附件:下载该文件资源,减少时间成本(增值服务)