jQuery右下角悬浮广告实例

 更新时间:2016年10月17日 11:10:23   作者:月光光  
现在很多网站都有悬浮广告,本篇文章主要介绍了jQuery右下角悬浮广告,非常具有实用效果,有需要的朋友可以来参考一下。

右下角悬浮广告是一种常见的网页广告展示方式,而且对用户浏览有干扰之嫌但对网站收益来说是很受站长们欢迎的。今天我给大家分享一个使用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="https://www.jb51.net/" 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()传入一些参数,可以扩展为网站消息提示框等效果,这个留给感兴趣的同学可以继续参考本站。

相关文章

  • javascript错误的认识不用关心内存管理

    javascript错误的认识不用关心内存管理

    因为垃圾回收的存在,让javascript等高级语言开发者产生了一个错误的认识,以为可以不用关心内存管理,需要的朋友可以了解下
    2012-12-12
  • 分享15个大家都熟知的jquery小技巧

    分享15个大家都熟知的jquery小技巧

    这篇文章主要分享了15个大家都熟知的jquery小技巧,帮助提高你jQuery应用的简单小技巧,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • JQuery实现简单瀑布流布局

    JQuery实现简单瀑布流布局

    这篇文章主要为大家详细介绍了JQuery实现简单瀑布流布局,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • jquery 动态增加删除行的简单实例(推荐)

    jquery 动态增加删除行的简单实例(推荐)

    下面小编就为大家带来一篇jquery 动态增加删除行的简单实例(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • jquery 弹出公告功能代码

    jquery 弹出公告功能代码

    jquery 弹出公告功能代码,可以关闭,有过度的关闭与打开。
    2010-05-05
  • jQuery DIV弹出效果实现代码

    jQuery DIV弹出效果实现代码

    现在很多网站都流行这种弹出式的对话框或是信息显示框,很想将这个流行元素加入到自己的项目中。使用jQuery可以不费大力气实现这种效果。将其记录到我的Blog中,与业界朋友们起分享。
    2009-07-07
  • jquery 中的each()跳出循环的语句

    jquery 中的each()跳出循环的语句

    很多新手朋友们都不知道jquery 中的each()怎么跳出循环,在each的回调函数中使用return false
    2014-05-05
  • jQuery 全选效果实现代码

    jQuery 全选效果实现代码

    利用jquery实现的全选效果代码,实际上我感觉直接用js好像更容易些。不过这样对于jquery的操作可以更熟悉。
    2009-03-03
  • jQuery实现判断控件是否显示的方法

    jQuery实现判断控件是否显示的方法

    这篇文章主要介绍了jQuery实现判断控件是否显示的方法,涉及jQuery针对页面元素属性相关操作技巧,需要的朋友可以参考下
    2017-01-01
  • jquery.validate使用时遇到的问题

    jquery.validate使用时遇到的问题

    这篇文章主要介绍了jquery.validate使用时遇到的问题的解决方法的汇总,真是应了那句老话,会者不难难者不会,这里记录一下,有需要的小伙伴可以参考下。
    2015-05-05

最新评论