html广告飘窗,一个JS解决所有的飘窗广告

近期有需求在网站首页添加一个飘窗广告，以前也用过蛮多的自行开发的JS，但是你懂得，有时候网站飘窗太多，会互相干扰。尤其在特殊的几个月里，若干个飘窗，中间位置，左右还有对联，左下角和右下角还是固定的飘窗层，烦都烦死了。

在网上搜索，找到一个叫 floatingAd.js 的插件，研究了一下，发现很好用，所以记录一下哈，基本上满足了飘窗的几种形式的需求

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

废话有点多，首先引入 floatingAd.js ，当然还有JQuery 1.7以上版本

这是HTML中的代码:

下来是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;

float: left;

opacity: 1;

}

.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/index.files/close.png") no-repeat;

cursor: pointer;

}

.floatingAd .text .title_1{

position: relative;

float: left;

font-size: 12px;

margin-left: 5px;

}

下边是全部的参数，包括一些默认参数和自定义参数：

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)

};

下边是我的配置参数

$(function(){

$.floatingAd({

//频率

delay: 30,

//超链接后是否关闭漂浮

isLinkClosed: false,

//漂浮内容

ad: [{

//关闭区域背景透明度(0.1-1)

headFilter: 0.3,

//图片

//往站试运行

'img': 'http://itl.xa.gov.cn/images/index.files/wangluoxuanchuan.png',

//图片高度

'imgHeight':180,

//图片宽度

'imgWidth': 370,

//图片链接

'linkUrl':'javascript:void(0);',

//浮动层级别

'z-index': 999,

//标题

'title': '',

//l链接

'linkUrl':'http://www.gjwlaqxcz.cn/'

}],

//关闭事件

onClose: function(elem){

$("#floatingAd").hide();

}

});

});

这就完成了一个飘窗的设置。

当然有人说我只想要一个最简单的飘窗，我也不想明白你的参数是啥意思，你能不能给我一个最简单的飘窗？好的，满足你

$(function() {

$.floatingAd({

ad: [{

'img': 'images/ijquery.jpg', //图片

'headFilter': 0,

'linkUrl': 'http://www.ijquery.cn/', //图片链接

}]

});

});

够简单吧！引入两个js,再添加两个链接地址直接OK。最后贴上这个插件的地址：https://gitee.com/hongweizhiyuan/floatingAd