基于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类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
仿百度输入框智能提示的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
ftp类(example.php)
2006/10/09 PHP
PHP4实际应用经验篇(6)
2006/10/09 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
RequireJs的使用详解
2017/02/19 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
Python 除法小技巧
2008/09/06 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
国际商务专业学生个人的自我评价
2013/09/28 职场文书
中专生求职自荐信范文
2013/12/22 职场文书
人资专员岗位职责
2014/04/04 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
职位说明书范文
2014/05/07 职场文书
关于爱国的标语
2014/06/24 职场文书
收款委托书范本
2014/09/11 职场文书
情人节活动总结范文
2015/02/05 职场文书
会计求职简历自我评价
2015/03/10 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
建国大业电影观后感
2015/06/01 职场文书
教育读书笔记
2015/07/02 职场文书
Python Matplotlib绘制动画的代码详解
2022/05/30 Python