最新消息:

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

图片幻灯插件 杨红伟 2092浏览 0评论

一:插件简介

近期,做到一个项目,用到了图片浮动,而且还带着关闭按钮。按理说,这个用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/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/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;
}
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址