第101款插件：floatingAd.js 漂浮广告

一：插件简介

近期，做到一个项目，用到了图片浮动，而且还带着关闭按钮。按理说，这个用JS挺好做。但既然对jquery如此钟爱，所以临时百度了一下，找到了一款好用的插件。

这款插件的名称就是floatingAd.js，下载时它用到的是jquery1.7.2。

它不仅可以自由浮动，带链接，有关闭按钮。而且可以带标题，有关闭事件，自定义关闭按钮的图片等等，个人觉得很好用。

详细请查看我的博客：http://www.ijquery.cn/?p=1291

二：插件作者、下载及演示

从插件的描述我们可以看到有如下内容，作者的简称及开发日期，如下：

作者: jjc
开发时间: 2012.07.04

下载地址：http://git.oschina.net/hongweizhiyuan/floatingAd

演示地址：http://www.ijquery.cn/study/demo/floatingAd/index.html

三：jquery适应性

版本：1.7.1,1.7.2,1.8.0,1.81,1.8.2,1.8,3
注：1.6.4以下和1.9.0以上的浮动按钮关闭按钮关闭不了

四：兼容性

这里以后也不讲IE的兼容性了，因为现在Windows10都开放了，一般都是IE11,Edge。

剩下都是Firefox,chrome,Opera,Safari，这些浏览器大家都知道。目前市场上这些浏览器大多数都支持！

五：参数介绍

这里的参数包括两部分，一部分是默认的，一部分是必须的。

var defaults = {
   step: 1,   //移动频率，数字越大移动越快
   delay: 50,   //每一步频率延迟移动
   isLinkClosed: false,   //点击超链接后是否关闭漂浮
   onClose: function(elem){}   //关闭触发的事件
};

var ads = {
   linkUrl: '#', //图片链接
   'z-index': '100', //浮动层级别
   'closed-icon': '', //关闭按键图片
   imgHeight: '', //图片高度
   imgWidth: '', //图片宽度
   title: '', //标题
   img: '#', //图片路径
   linkWindow: '_blank', //链接是否为打开新窗口
   headFilter: 0.2 //关闭区域背景透明度(0.1-1)
};

注：1)如果不想要标题的背景，只要将参数“不写title”和将“headFilter设置为0”就可以。

2)关闭按钮的图片建议使用 16*16，否则就会出现溢出现象。如果想要关闭按钮大一些，可在css中设置图片的大小。

六：最简使用教程

演示地址： http://www.ijquery.cn/study/demo/floatingAd/simple.html

HTML代码：

<script src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/floatingAd.js"></script>
<script type="text/javascript">
	$(function() {
		$.floatingAd({
			ad: [{
				'img': 'images/ijquery.jpg', //图片
				'headFilter': 0,
				'linkUrl': 'http://www.ijquery.cn/', //图片链接
			}]
		});
	});
</script>

CSS代码：

.floatingAd .ad {
	z-index: 100;
	background: none;
	position: absolute;
	display: none;
}

.floatingAd a {
	color: #000000;
	display: inline-block;
	text-decoration: none;
}

.floatingAd a img {
	border: 0;
}

.floatingAd .close {
	display: none;
}

.floatingAd .opacity {
	position: absolute;
	top: 0;
	width: 100%;
	height: 25px;
	background-color: #000000;
	opacity: 0.20;
	filter: alpha(opacity=20);
}

.opacity1 {
	opacity: 0.90;
	filter: alpha(opacity=90);
}

.floatingAd .text {
	position: absolute;
	top: 0;
	width: 100%;
	height: 25px;
	color: #000000;
	line-height: 25px;
}

.floatingAd .text .button {
	position: relative;
	float: right;
	top: 5px;
	right: 5px;
	width: 16px;
	height: 16px;
	background: url("../images/close.png") no-repeat;
	cursor: pointer;
}

.floatingAd .text .title {
	position: relative;
	float: left;
	font-size: 12px;
	margin-left: 5px;
}