JQuery漂浮广告插件floatingAd.js

简介

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

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

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