jQuery右下角悬浮广告实例


Posted in Javascript onOctober 17, 2016

右下角悬浮广告是一种常见的网页广告展示方式,而且对用户浏览有干扰之嫌但对网站收益来说是很受站长们欢迎的。今天我给大家分享一个使用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://3water.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 定位input元素的几种方法小结
Jul 28 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 #Javascript
Javascript获取background属性中url的值
Oct 17 #Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 #Javascript
jquery checkbox的相关操作总结
Oct 17 #Javascript
JS动态添加选项案例分析
Oct 17 #Javascript
Java  Spring 事务回滚详解
Oct 17 #Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 #Javascript
You might like
PHP产生随机字符串函数
2006/12/06 PHP
php str_pad 函数使用详解
2009/01/13 PHP
PHP mkdir()定义和用法
2009/01/14 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
php递归json类实例
2014/12/02 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
基于jquery的cookie的用法
2011/01/10 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
Python运算符重载用法实例分析
2015/06/01 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
在线服装零售商:SheIn
2016/07/22 全球购物
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
黄山导游词
2015/01/31 职场文书
vue实现列表垂直无缝滚动
2022/04/08 Vue.js