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
html广告飘窗,一个JS解决所有的飘窗广告相关推荐
- php实现飘窗,JS实现网站图片飘窗效果,JavaScript悬浮广告(附详细代码)
原标题:JS实现网站图片飘窗效果,JavaScript悬浮广告(附详细代码) JS实现网站图片飘窗效果,Java悬浮广告,郑州SEO提供以下代码,仅供参考: 飘窗效果-丁光辉博客(www.dinggu ...
- java 屏蔽广告js_用js屏蔽被http劫持的浮动广告实现方法
最近发现网站经常在右下角弹出一个浮动广告,开始的时候以为只是浏览器的广告. 后来越来越多同事反映在家里不同浏览器也会出现广告.然后深入检查了下,发现网站竟然被劫持了. 然后百度了一大堆资料,什么htt ...
- 实现一个包含Microsoft.Advertising和SmartMad广告控件的UserControl
目前微软为Windows Phone 7 提供了内置的广告控件,可惜的是大陆地区无法使用,但也不是绝对的,如果将应用的语言设置成英语,也是可以显示的,可以通过以下代码: System.Globaliz ...
- vue.js 默认选中select_vue.js 解决v-model让select默认选中不生效的问题
笔者今天在开发中遇到一个看起来很神奇的问题,平时编辑的页面我们select下拉选框利用vue.js 的v-model来实现自动选中,今天无论如何都选不中,后来经过很久的复查和大神的一句话终于解决这个这 ...
- 用JS解决多行溢出文本的省略问题
前言 在项目开发过程中,经常会遇到溢出文本的省略问题.根据需求,可以把文本省略分为单行文本省略和多行文本省略两类. 单行文本的省略,现在css样式 text-overflow 已经有兼容性很好的样式支 ...
- webpack4配置(1)-打包一个js文件
常用指令 npm install == npm i npm install --save == npm i -S npm insall --save-dev == npm i -D 两者的区别:-D只 ...
- 用JS解决那些有趣的数学题!
用JS解决那些有趣的数学题! 1.公园里有一只猴子和一堆桃子,猴子每天吃掉桃子总数的一半,把剩下一半中扔掉一个坏的.到第七天的时候,猴子睁开眼发现只剩下一个桃子.问公园里刚开始有多少个桃子?最后一天剩 ...
- 在一个js文件中引入另一个js文件
第一个js文件(被引入的js文件),文件名one.js,内容如下 function alertInOne(){ alert('in one'); } 第二个js文件,文件名two.js,内容如 ...
- 维睿互动|硬核干货!Google广告拒登原因及解决方法汇总
近期不少小伙伴在后台反应在投放Google广告的过程中会遇到一些突发棘手的情况,最令人头疼的就是广告被拒登和账户被暂停,而且由于Google的智能广告系统,你不解决还不行. 那今天小维为大家盘点一下G ...
- 使用谷歌提供的html5shiv.js解决
使用谷歌提供的html5shiv.js解决 ~~~html 插件功能:用于解决IE8及以下版本的浏览器对HTML5新增元素的不兼容问题 写在网页头部(写在head标签内部) <script sr ...
最新文章
- MAC安装OpenXenManager管理Xenserver
- 滴滴自动驾驶部门成立独立公司,CTO张博兼任新公司CEO
- QIIME 2教程. 08差异丰度分析gneiss(2021.2)
- linux的文件压缩与解压缩,linux(文件压缩与解压缩)
- Linux C编程--网络编程1--字节顺序和字节处理函数
- JS与OC中的方法相互调用
- GDCM:gdcm::PixelFormat的测试程序
- android 的webview解析
- mysql类型说明_MYSQL 数据类型说明
- 《剑指Offer》 从上往下打印出二叉树
- Python enumerate():使用计数器简化循环
- AI学习笔记(十九)循环神经网络
- Python项目打包成exe文件
- Unit 11 电话转接
- 从二元函数的泰勒展开到应用Hessian矩阵检测边缘
- 解决:Word仿宋字体显示不正确,仿宋GB2312的问题
- C# 专业的软件安装包
- idea 无法新建工程
- 数据预处理Part5——样本分布不均衡
- 一个合格的程序员所具备的素质和修养