基于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 相关文章推荐
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
vue 点击按钮增加一行的方法
Sep 07 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 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 jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
php实现文件下载实例分享
2014/06/02 PHP
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
tornado框架blog模块分析与使用
2013/11/21 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
python实现感知器算法(批处理)
2019/01/18 Python
python实现可逆简单的加密算法
2019/03/22 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
python关于变量名的基础知识点
2020/03/03 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
python批量修改文件名的示例
2020/09/27 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
日语专业毕业生自荐书
2014/06/18 职场文书
2014年学生会工作总结
2014/11/07 职场文书
申报材料格式
2014/12/30 职场文书
创业计划书之养殖业
2019/10/11 职场文书
导游词之张家界
2019/10/31 职场文书