基于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 相关文章推荐
在html页面上拖放移动标签
Jan 08 Javascript
js 上传图片预览问题
Dec 06 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
使用JS获取SessionStorage的值
Jan 12 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的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
python如何编写win程序
2020/06/08 Python
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
优秀团支部事迹材料
2014/02/08 职场文书
美术教师岗位职责
2014/03/18 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
健康状况证明书
2014/11/26 职场文书
小鞋子观后感
2015/06/05 职场文书
草房子读书笔记
2015/06/29 职场文书
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏