基于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 相关文章推荐
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
原生js实现弹出层效果
Jan 20 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 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
咖啡与牛奶
2021/03/03 冲泡冲煮
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
详解vue axios中文文档
2017/09/12 Javascript
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
python得到单词模式的示例
2018/10/15 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
详解python中init方法和随机数方法
2019/03/13 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
简述安装Slackware Linux系统的过程
2012/01/12 面试题
几个Linux面试题笔试题
2016/08/01 面试题
班主任工作经验材料
2014/02/02 职场文书
小学毕业感言500字
2014/02/28 职场文书
外贸专业求职信
2014/03/09 职场文书
离婚协议书范本2014
2014/10/27 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
学生个人总结范文
2015/02/15 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
SQL Server删除表中的重复数据
2022/05/25 SQL Server