jQuery右下角悬浮广告实例
2016-10-17 00:00
393 查看
右下角悬浮广告是一种常见的网页广告展示方式,而且对用户浏览有干扰之嫌但对网站收益来说是很受站长们欢迎的。今天我给大家分享一个使用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()传入一些参数,可以扩展为网站消息提示框等效果,这个留给感兴趣的同学可以继续参考本站。
js点击出现悬浮窗效果不使用JQuery插件
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
jquery实现鼠标悬浮停止轮播特效
jquery悬浮提示框完整实例
jQuery实现悬浮在右上角的网页客服效果代码
jQuery鼠标悬浮链接弹出跟随图片实例代码
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
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.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()传入一些参数,可以扩展为网站消息提示框等效果,这个留给感兴趣的同学可以继续参考本站。
您可能感兴趣的文章:
jquery鼠标放上去显示悬浮层即弹出定位的div层js点击出现悬浮窗效果不使用JQuery插件
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
jquery实现鼠标悬浮停止轮播特效
jquery悬浮提示框完整实例
jQuery实现悬浮在右上角的网页客服效果代码
jQuery鼠标悬浮链接弹出跟随图片实例代码
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
相关文章推荐
- jQuery右下角悬浮广告实例
- jquery实现的可隐藏重现的靠边悬浮层实例代码
- jQuery鼠标悬浮链接弹出跟随图片实例代码
- JavaScript 和 jQuery 设置悬浮广告
- jQuery鼠标悬浮链接弹出跟随图片实例代码
- jquery广告无缝轮播代码实例
- 原生js实现和jQuery实现 屏幕自由滚动广告 悬浮停止
- jQuery右下角悬浮广告
- jQuery实例之实现滚动广告的功能
- jQuery实现的简单悬浮层功能完整实例
- jquery悬浮提示框完整实例
- jQuery鼠标悬浮链接弹出跟随图片实例代码
- Jquery,css如何创建一个悬浮的广告页面?
- jquery悬浮提示框完整实例
- jquery实现的可隐藏重现的靠边悬浮层实例代码
- jquery广告无缝轮播实例
- jQuery - 综合实例 - 固定表头,滚动表格内容
- jQuery中文入门指南,实例,起点教程
- jQuery - 综合实例 - 定时刷新
- jQuery - 综合实例 - Pre标签在IE与Firefox下效果相对理想的换行处理