建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery漂浮广告插件floatingAd.js

来源:易助科技网浏览量:14收藏

简介


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