jQuery右下角悬浮广告
2014-05-13 10:25
267 查看
右下角悬浮广告是一种常见的网页广告展示方式,而且对用户浏览有干扰之嫌但对网站收益来说是很受站长们欢迎的。今天我给大家分享一个使用jQuery来实现网页右下角广告的实例。它的优点是可以从右下角缓慢升起,展示一定时间自动消失,并且可以改成网站消息提示窗口。
查看演示 下载源码
HTML
首先准备广告素材,并在body中建立一个用户悬浮的广告主体DIV#pop,设置为不显示,在广告的上部标题栏有关闭按钮,点击关闭时,则关闭隐藏悬浮广告。
CSS
使用CSS稍微美化#pop。注意其实我们使用position:fixed;right:0;bottom:0;其实就已经将广告位置固定在右下角了,但是要兼顾那些IE6的用户,ie6不支持fixed,这个问题我们可以通过jquery的插件来解决ie6的兼容行问题。
jQuery
该悬浮广告效果依赖于jQuery,所以在页面载入时别忘了先载入jQuery库文件。
在ie6的情况下,我们调用了jquery.fixed这个插件,当然我们已经把该插件放在了下载包里的ads.js中,请下载压缩包。调用这段代码效果只需要这样写:
这样,我们就可以展示一个右下角悬浮广告效果,我们也可以继续扩展,向Pop()传入一些参数,可以扩展为网站消息提示框等效果,这个留给感兴趣的同学
查看演示 下载源码
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="http://www.helloweba.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()传入一些参数,可以扩展为网站消息提示框等效果,这个留给感兴趣的同学
相关文章推荐
- JavaScript 和 jQuery 设置悬浮广告
- 原生js实现和jQuery实现 屏幕自由滚动广告 悬浮停止
- jQuery右下角悬浮广告实例
- Jquery,css如何创建一个悬浮的广告页面?
- jQuery右下角悬浮广告实例
- 使用jQuery实现动态添加小广告
- jQuery 浮动广告实现代码
- 鼠标悬浮弹出标题制作JQuery
- JQuery简单轮换广告-第二版
- 10款jquery图片广告特效的预览及源码下载 改自[帅的相对论]
- jQuery实现悬浮在右上角的网页客服效果代码
- 使控件悬浮在页面上不随滚动条变化的JQUERY插件
- jquery技术初探-广告淡入淡出
- jQuery实现网页右下角悬浮层提示
- jQuery鼠标悬浮链接弹出跟随图片实例代码
- jquery实现的可隐藏重现的靠边悬浮层
- 【JS】网页悬浮广告及联系QQ客服侧边栏
- jquery 上下滚动广告
- jquery广告无缝轮播实例
- 使用jquery完成定时弹出广告图片