jQuery右下角悬浮广告实例

前端之家收集整理的这篇文章主要介绍了jQuery右下角悬浮广告实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

HTML

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

CSS

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

jQuery

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

显示 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中,请下载压缩包。调用这段代码效果只需要这样写:

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

猜你在找的jQuery相关文章