jQuery实现右下角悬浮广告-创新互联
本篇内容主要讲解“jQuery实现右下角悬浮广告”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jQuery实现右下角悬浮广告”吧!
右下角悬浮广告是一种常见的网页广告展示方式，而且对用户浏览有干扰之嫌但对网站收益来说是很受站长们欢迎的。今天我给大家分享一个使用jQuery来实现网页右下角广告的实例。它的优点是可以从右下角缓慢升起，展示一定时间自动消失，并且可以改成网站消息提示窗口。
HTML
首先准备广告素材，并在body中建立一个用户悬浮的广告主体DIV#pop，设置为不显示，在广告的上部标题栏有关闭按钮，点击关闭时，则关闭隐藏悬浮广告。
#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 h3{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()传入一些参数，可以扩展为网站消息提示框等效果，这个留给感兴趣的同学
到此，相信大家对“jQuery实现右下角悬浮广告”有了更深的了解，不妨来实际操作一番吧！这里是创新互联建站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
分享名称：jQuery实现右下角悬浮广告-创新互联
本文URL：http://6mz.cn/article/dsjdoo.html