基于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 对象的定义方法
Jan 10 Javascript
用js实现的自定义的对话框的实现代码
Mar 21 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
js密码强度校验
Nov 10 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
JS前端基于canvas给图片添加水印
Nov 11 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 Javascript
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 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
header()函数使用说明
2006/11/23 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
PHP模板解析类实例
2015/07/09 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
javascript常用的设计模式
2017/02/09 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
Python json转字典字符方法实例解析
2020/04/13 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
美国在线珠宝商店:SZUL
2017/02/11 全球购物
全球度假村:Club Med
2017/11/27 全球购物
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
上海世博会志愿者口号
2014/06/17 职场文书
党员一帮一活动总结
2014/07/08 职场文书
工程索赔意向书
2014/08/30 职场文书