首页 > 编程 > JavaScript > 正文

jQuery右下角悬浮广告实例

2019-11-20 08:44:08
字体:
来源:转载
供稿:网友

右下角悬浮广告是一种常见的网页广告展示方式,而且对用户浏览有干扰之嫌但对网站收益来说是很受站长们欢迎的。今天我给大家分享一个使用jQuery来实现网页右下角广告的实例。它的优点是可以从右下角缓慢升起,展示一定时间自动消失,并且可以改成网站消息提示窗口。

HTML

首先准备广告素材,并在body中建立一个用户悬浮的广告主体DIV#pop,设置为不显示,在广告的上部标题栏有关闭按钮,点击关闭时,则关闭隐藏悬浮广告。

<div id="pop" style="display:none;">   <div id="popHead">   <a id="popClose" title="关闭">关闭</a>   <h2>赞助广告</h2>  </div>  <div id="popContent">  <a href="//www.VeVB.COm/" target="_blank"><img src="images/imgad.jpg"></a>  </div> </div> 

CSS
使用CSS稍微美化#pop。注意其实我们使用position:fixed;right:0;bottom:0;其实就已经将广告位置固定在右下角了,但是要兼顾那些IE6的用户,ie6不支持fixed,这个问题我们可以通过jquery的插件来解决ie6的兼容行问题。

#pop{background:#fff;width:300px; height:282px;font-size:12px;position:fixed;right:0;bottom:0;} #popHead{line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;font-size:12px; padding-left:10px;} #popHead h2{font-size:14px;color:#666;line-height:32px;height:32px;} #popHead #popClose{position:absolute;right:10px;top:1px;} #popHead a#popClose:hover{color:#f00;cursor:pointer;} 

jQuery

该悬浮广告效果依赖于jQuery,所以在页面载入时别忘了先载入jQuery库文件。

function Pop(){  this.apearTime=1000;  this.hideTime=500;  this.delay=10000;  //显示  this.showDiv();  //关闭  this.closeDiv(); } Pop.prototype={  showDiv:function(time){  if (!($.browser.msie && ($.browser.version == "6.0") && !$.support.style)) {   $('#pop').slideDown(this.apearTime).delay(this.delay).fadeOut(400);;  } else{//调用jquery.fixed.js,解决ie6不能用fixed   $('#pop').show();    jQuery(function($j){     $j('#pop').positionFixed()    })  }  },  closeDiv:function(){   $("#popClose").click(function(){    $('#pop').hide();    }  );  } } 

在ie6的情况下,我们调用了jquery.fixed这个插件,当然我们已经把该插件放在了下载包里的ads.js中,请下载压缩包。调用这段代码效果只需要这样写:

var popad=new Pop(); 

这样,我们就可以展示一个右下角悬浮广告效果,我们也可以继续扩展,向Pop()传入一些参数,可以扩展为网站消息提示框等效果,这个留给感兴趣的同学可以继续参考本站。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表