基于jquery实现的定时显示与隐藏div广告的实现代码


Posted in Javascript onAugust 22, 2013

下面我给大家分享我的方法:

在jquery中要显示与隐藏层是很简单的直接使用hide与show方法就可以了,但要定时我们需要利用setTimeout函数来实例,下面我给大家分享我的方法。
html页面中我们随便放些东西

<div class="toolbarframe" style="display:none;"><a href="https://3water.com" target="_blank"><img src="/upfile/swf/s.jpg" /></a><a class="bigad_close">关闭</a></div>

jquery代码

<script src="/js/jquery-1.7.2.min.js" language="javascript" type="text/javascript"></script>
<script>
$(function(){ 
setTimeout('$(".toolbarframe").show("slow")',3000);
 setTimeout('$(".toolbarframe").hide("slow")',13000);
  $(".bigad_close").click(function(){
 $(".toolbarframe").hide("slow");
})
});
</script>

简单介绍下上面的核心实现代码:

setTimeout('$(".toolbarframe").show("slow")',3000); 过三秒div慢慢从小到大显示出来
setTimeout('$(".toolbarframe").hide("slow")',13000); 过十秒再自动把div从大到小隐藏了
$(".bigad_close").click(function(){
 $(".toolbarframe").hide("slow");
})

这个是用户来关闭,点击关闭就可以实现关闭这个层了。

Javascript 相关文章推荐
纯js实现背景图片切换效果代码
Nov 14 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
原生javascript实现分页效果
Apr 21 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
浅谈js中的bind
Mar 18 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
仿百度输入框智能提示的js代码
Aug 22 #Javascript
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 #Javascript
JavaScript中的eval()函数详解
Aug 22 #Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 #Javascript
jquery重新播放css动画所遇问题解决
Aug 21 #Javascript
JS性能优化笔记搜索整理
Aug 21 #Javascript
JS检测图片大小的实例
Aug 21 #Javascript
You might like
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
jquery select操作的日期联动实现代码
2009/12/06 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
babel基本使用详解
2017/02/17 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
Python中使用ElementTree解析XML示例
2015/06/02 Python
Python实现telnet服务器的方法
2015/07/10 Python
Python中enumerate函数代码解析
2017/10/31 Python
Python实现全排列的打印
2018/08/18 Python
python中的for循环
2018/09/28 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
python - asyncio异步编程
2021/04/06 Python
MySQL 时间类型的选择
2021/06/05 MySQL
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python
sql注入报错之注入原理实例解析
2022/06/10 MySQL