第81款插件：jquery.adrightbottom.js网页右下角悬浮广告

一、插件介绍

右下角悬浮广告是一种常见的网页广告展示方式，而且对用户浏览有干扰之嫌但对网站收益来说是很受站长们欢迎的。今天我给大家分享一个使用jQuery来实现网页右下角广告的插件jquery.adrightbottom.js。它的优点是可以从右下角缓慢升起，展示一定时间自动消失，并且可以改成网站消息提示窗口。

这款插件其实实现原理很简单：

一方面利用jquery的代码来实现，如下：

$("#pop").slideDown(1000).delay(1000).fadeOut(1000); 

另一方面是利用 jquery.pos-fixed.js 来解决IE6存在的定位问题，如果不考虑的IE6的用户可以直接访问这个长长的链接进行分析 http://www.ijquery.cn/study/demo/adrightbottom/adrightbottom-noie6.html 的源代码进行分析，其实主要代码就一句，如下

$(function(){
	$("#pop").slideDown(1000).delay(1000).fadeOut(1000);
	$("#popClose").click(function(){
		$("#pop").hide("fast");
	});
});

这款插件只是集成了两者统一而已！如图：

二、插件作者及下载

插件作者及官网：这款插件是helloweba.com网站作者写的，我只是另起了一个名称，这样方便归类。

插件下载地址：http://www.ijquery.cn/js/jquery.adrightbottom.js

三、参数

比较不同的是，这款插件是在jquery.adrightbottom.js中修改，并没有单独出来。

this.apearTime=1000;  //广告1秒钟出现
this.delay=10000; //持续时间10毫秒

四、最简使用教程

HTML代码：

首先准备广告素材，并在body中建立一个用户悬浮的广告主体DIV#pop，设置为不显示，在广告的上部标题栏有关闭按钮，点击关闭时，则关闭隐藏悬浮广告。注意那段JS代码

var popad=new Pop();

<div id="pop" style="display:none;">
	<div id="popHead">
		<a id="popClose" title="关闭">关闭</a>
		<h2>赞助广告</h2>
	</div>
	<div id="popContent">
		<a href="#" target="_blank"><img src="imgad.jpg"></a>
	</div>
</div>
<script>
	var popad=new Pop();
</script>

 CSS代码：

#pop{background:#fff;width:300px; height:282px;font-size:12px;position:fixed;right:0;bottom:0;}
#popHead{line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;font-size:12px;padding:0 0 0 10px;}
#popHead h2{font-size:14px;color:#666;line-height:32px;height:32px;text-align:left;}
#popHead #popClose{position:absolute;right:10px;top:1px;cursor:pointer;}
#popHead #popClose:hover{color:#f00;cursor:pointer;}