简介

floatingAd是一款漂浮广告插件，它不仅可以自由浮动，带链接，有关闭按钮。而且可以带标题，有关闭事件，自定义关闭按钮的图片等等。

参数介绍：

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

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中设置图片的大小。

使用

1.  引入 jquery.js 和 floatingAd.js 文件

2.  HTML

.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;
}

3.  调用

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

相关链接

gitee 地址 ：https://gitee.com/hongweizhiyuan/floatingAd#https://gitee.com/link?target=http%3A%2F%2Fwww.ijquery.cn%2F%3Fp%3D1291

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