基于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整除运算函数ceil和floor的区别分析
Apr 14 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
layui动态加载多表头的实例
Sep 05 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使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
python操作 hbase 数据的方法
2016/12/18 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
Django重设Admin密码过程解析
2020/02/10 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
Django权限设置及验证方式
2020/05/13 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
什么是Rollback Segment
2013/04/22 面试题
资源工程专业毕业生求职信
2014/02/27 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
会计学自荐信
2014/06/03 职场文书
工程部部长岗位职责
2015/02/12 职场文书
居委会工作总结2015
2015/05/18 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
入党申请书怎么写?
2019/06/11 职场文书