基于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类选择器用法实例
Dec 23 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
详解vue组件基础
May 04 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 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采集速度探究总结(原创)
2008/04/18 PHP
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
javascript 计算两个整数的百分比值
2009/12/26 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
JS监听组合按键思路及实现过程
2020/04/17 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
Python中的匿名函数使用简介
2015/04/27 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
周年庆典主持词
2014/04/02 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS