当前位置:   article > 正文

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

html 如何之多飘窗

近期有需求在网站首页添加一个飘窗广告,以前也用过蛮多的自行开发的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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/110393
推荐阅读
相关标签
  

闽ICP备14008679号