基于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编写COM组件的步骤
Mar 17 Javascript
JavaScript中的细节分析
Jun 30 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
js实现表格字段排序
2014/02/19 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
Node 代理访问的实现
2019/09/19 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
python实现学生信息管理系统
2020/04/05 Python
python实现词法分析器
2019/01/31 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
浅析使用Python搭建http服务器
2019/10/27 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
求职简历中自我评价
2014/01/28 职场文书
大学运动会入场词
2014/02/22 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
会议主持词
2014/03/17 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
婚内分居协议书范文
2014/11/26 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
Oracle笔记
2021/04/05 Oracle