基于JQuery实现页面定时弹出广告

Js相关技术

定时器:

​ setInterval & clearInterval
​ setTimeout & clearTimeout

显示: img.style.display = "block"

隐藏: img.style.display = "none"

img 对象

style属性: style对象

需求分析

当用户打开界面，3秒钟之后弹出广告，这个广告显示5秒钟，隐藏广告

技术分析

定时器: setTimeout

显示和隐藏: style.display = "block/none"

步骤分析：

  • 导入JQ的文件
  • 编写JQ的文档加载事件
  • 启动定时器 setTimeout("",3000);
  • 编写显示广告的函数
  • 在显示广告里面再启动一个定时器
  • 编写隐藏广告的函数

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<!--
			1. 导入JQ的文件
			2. 编写JQ的文档加载事件
			3. 启动定时器 setTimeout("",3000);
			4. 编写显示广告的函数
			5. 在显示广告里面再启动一个定时器
			6. 编写隐藏广告的函数
		-->
		<script>
			//显示广告
			function showAd(){
				$("#img1").slideDown(2000);
				setTimeout("hideAd()",3000);
			}

			//隐藏广告
			function hideAd(){
				$("#img1").slideUp(2000);
			}

			$(function(){
				setTimeout("showAd()",3000);

			});
		</script>
	</head>
	<body>
		<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" id="img1" width="100%" style="display:none" />
	</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery广告无缝轮播实例

    本文实例为大家演示了jquery广告无缝轮播效果,供大家参考,具体内容如下 需要自行添加五张图片和引用jquery库 纵向轮播实例: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery广告无缝轮播代码演示</title> <style type="t

  • jQuery实现的无缝广告图片左右滚动功能详解

    本文实例讲述了jQuery实现的无缝广告图片左右滚动功能.分享给大家供大家参考,具体如下: 先是写了一个此功能的jQuery插件,但是一时写不出如何使用鼠标进行滚动方向的切换,于是又写了另一个可以实现切换的版本... 原理: 1.把滚动的内容复制2份放到原内容左右,这样无论向左右滚动都不会出现断掉的情况 2.改变内容样式的left值实现滚动效果,向左或向右滚动一个内容的长度后,还原并继续滚动,这样看起来就像无缝一直滚动的样子了(视觉上的效果,^_^) 3.鼠标放上去则clearInterval,

  • jQuery网页右侧广告跟随滚动代码分享

    两种方法都分享给大家,希望对大家的学习有所启发. 方法一: <script type="text/javascript">// <![CDATA[ $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(func

  • 使用jQuery实现页面定时弹出广告效果

    使用jQuery实现页面定时弹出广告效果

    1.JQuery效果 2.步骤分析: 第一步:引入jQuery相关的文件 第二步:书写页面加载函数 第三步:在页面加载函数中,获取显示广告图片的元素. 第四步:设置定时操作(显示广告图片的函数) 第五步:在显示广告图片的函数中,使用jQuery的方法让广告图片显示(show()) 第六步:清除显示广告图片的定时操作 第七步:设置定时操作(隐藏广告图片的函数) 第八步:在隐藏广告图片的函数中,使用jQuery的方法让广告图片隐藏(hide()) 第九步:清除隐藏广告图片的定时操作 <script

  • jquery实现两边飘浮可关闭的对联广告

    jquery实现两边飘浮可关闭的对联广告

    效果展示: 代码说明: 可关闭的左右两边飘浮的对联广告代码jquery特效,宽屏分辨率大于1024px才显示.因为考虑到窄屏下显示对联广告那真是用户体验超差. 点击关闭按钮可以单独关闭自己一边的飘浮的对联广告代码. js代码中的var screen_w = screen.width; if(screen_w>1024){duilian.show();} 是jquery判断浏览器分辨率的,你可以修改这个可关闭的左右两边飘浮的对联广告代码所需要的浏览器分辨率值,如果不想做判断可以删除这两句,让后把c

  • jQuery右下角悬浮广告实例

    右下角悬浮广告是一种常见的网页广告展示方式,而且对用户浏览有干扰之嫌但对网站收益来说是很受站长们欢迎的.今天我给大家分享一个使用jQuery来实现网页右下角广告的实例.它的优点是可以从右下角缓慢升起,展示一定时间自动消失,并且可以改成网站消息提示窗口. HTML 首先准备广告素材,并在body中建立一个用户悬浮的广告主体DIV#pop,设置为不显示,在广告的上部标题栏有关闭按钮,点击关闭时,则关闭隐藏悬浮广告. <div id="pop" style="display:

  • jQuery实现广告条滚动效果

    本文实例为大家分享了jQuery实现广告条滚动效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{padding: 0px;margin: 0px;} #list{width: 150px;height: 310px;margin: 0px auto;bor

  • jquery实现可关闭的倒计时广告特效代码

    jquery实现可关闭的倒计时广告特效代码

    本文实例讲述了jquery实现可关闭的倒计时广告特效代码.分享给大家供大家参考.具体如下: 这是一款类似播放视频时候最开始的倒计时广告,广告时间结束才能看到视频内容,一个JS小贴片广告代码,右上角带关闭按钮,左上角显示倒计时剩余时间,运行jQuery代码综合实现,CSS和HTML共同结合的网页特效,兼容各主流浏览器,本效果是从门户网站上整理而来.希望大家喜欢. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-close-time

  • 基于JQuery实现页面定时弹出广告

    Js相关技术 定时器: ​ setInterval & clearInterval ​ setTimeout & clearTimeout 显示: img.style.display = "block" 隐藏: img.style.display = "none" img 对象 style属性: style对象 需求分析 当用户打开界面,3秒钟之后弹出广告,这个广告显示5秒钟,隐藏广告 技术分析 定时器: setTimeout 显示和隐藏: styl

  • 基于jQuery的网页右下角弹出广告(IE7,firefox)

    演示代码: 测试 .divCss{ bottom:0; display:block; height:25px; overflow:hidden; padding:0; position:fixed; right:20px; } .contentCss{ background:#666; height:200px; width:200px; } .contentCssHeight{ } .titleCss{ width:200px; height:25px; line-height:25px; t

  • 基于Jquery+div+css实现弹出登录窗口(代码超简单)

    具体代码详情如下所示: 基本思路先隐藏(dispaly:none)再显示,半透明蒙版层通过 z-index:9998; z-index:9999; 值越大越在前面 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • 基于jQuery实现点击弹出层实例代码

    jquery实现点击链接弹出层效果:本例实现的主要原理:jquery操作DOM元素.对层样式的设置.将display:设置为none;让层隐藏: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net" /> <tit

  • jQuery+css+html实现页面遮罩弹出框

    jQuery+css+html实现页面遮罩弹出框

    页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html, html代码如下: 复制代码 代码如下: <div id="main"><a href="javascript:showBg();">点击这里查看效果</a> <div id="fullbg"></div> <div id="dialog"&g

  • jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果

    jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果

    本文实例讲述了jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的弹出层,点击文字后从网页右上角飞入,也可以说是滑入,此类弹出框带有关闭按钮,可自定义标题栏和弹出框内容,风格自己可定义,代码简洁,基于jquery实现,学习参考价值大,也可拿出即用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-title-info-stye-alert-code

  • jquery制作漂亮的弹出层提示消息特效

    jquery制作漂亮的弹出层提示消息特效

    今天给大家带来一款基于jquery超炫的弹出层提示消息.这款实例页面初始时,一个go按钮.当单击go按钮时,提示强出层以动画形式出现.效果图如下: 实现的代码. html代码: 复制代码 代码如下: <div class='b'>     </div>     <div class='bb'>     </div>     <button id='go'>         GO     </button>     <div cl

  • jquery实现点击弹出层效果的简单实例

    jquery实现点击弹出层效果的简单实例

    弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考. 效果代码如下: 在 弹出层 中下面是核心代码 复制代码 代码如下: <script type="text/javascript">// 渐变弹出层$(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定

  • jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

    jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

    弹出层用来向用户展示详细的信息,交互性非常强.弹出层有对话框.模态窗口等形式,这里我都把他们叫做弹出层,我的同事们也是这么叫的.一般我们喜欢使用比较成熟的弹出层插件如fancybox等,但在本文,我将先抛弃插件,给大家介绍如何使用jQuery+CSS3+Html5实现弹出层. 效果展示       源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式.甚至js方法调用.我们最终做出来的弹出层效果应该是响应式的,也就是说可以

随机推荐