案例：使用JQ完成广告定时弹出取消等操作

最新推荐文章于 2021-03-25 16:47:44 发布
最新推荐文章于 2021-03-25 16:47:44 发布
阅读量431 收藏
点赞数
分类专栏： JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhanshixiang/article/details/90582425
版权

需求：页面加载后几秒钟，显示一个广告弹出框，显示完设置的时间后自动隐藏。用户也可在弹窗以出现就点击关闭
             第一步：引入jQuery相关的文件
            第二步：书写页面加载函数
            第三步：在页面加载函数中，获取显示广告图片的元素。
            第四步：设置定时操作(显示广告图片的函数)
            第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())
            第六步：清除显示广告图片的定时操作
            第七步：设置定时操作(隐藏广告图片的函数)
            第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())
            第九步：清除隐藏广告图片的定时操作*/

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<style>
			#father {
				border: 0px solid red;
				width: 1300px;
				height: 2170px;
				margin: auto;
			}
			/*#logo{
				border: 0px solid black;
				width: 1300px;
				height: 50px;
			}*/
			
			.top {
				border: 0px solid blue;
				width: 431px;
				height: 50px;
				float: left;
			}
			
			#top {
				padding-top: 12px;
				height: 38px;
			}
			
			#menu {
				border: 0px solid red;
				width: 1300px;
				height: 50px;
				background-color: black;
				margin-bottom: 10px;
			}
			
			ul li {
				display: inline;
				color: white;
			}
			
			#clear {
				clear: both;
			}
			
			#product {
				border: 0px solid red;
				width: 1300px;
				height: 558px;
			}
			
			#product_top {
				border: 0px solid blue;
				width: 100%;
				height: 45px;
				padding-top: 8px;
			}
			
			#product_bottom {
				border: 0px solid green;
				width: 100%;
				height: 500px;
			}
			
			#product_bottom_left {
				border: 0px solid red;
				width: 200px;
				height: 500px;
				float: left;
			}
			
			#product_bottom_right {
				border: 0px solid blue;
				width: 1094px;
				height: 500px;
				float: left;
			}
			
			#big {
				border: 0px solid red;
				width: 544px;
				height: 248px;
				float: left;
			}
			
			.small {
				border: 0px solid blue;
				width: 180px;
				height: 248px;
				float: left;
				/*让里面的内容居中*/
				text-align: center;
			}
			
			#bottom {
				text-align: center;
			}
			
			a {
				text-decoration: none;
			}
		</style>

		<!--1、首先引入JQuery文件-->
		<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>

		<script>
			/*广告弹窗的定时弹出与清除
		       需求：页面加载后几秒钟，显示一个广告弹出框，显示完设置的时间后自动隐藏。用户也可在弹窗以出现就点击关闭
		       第一步：引入jQuery相关的文件
			第二步：书写页面加载函数
			第三步：在页面加载函数中，获取显示广告图片的元素。
			第四步：设置定时操作(显示广告图片的函数)
			第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())
			第六步：清除显示广告图片的定时操作
			第七步：设置定时操作(隐藏广告图片的函数)
			第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())
			第九步：清除隐藏广告图片的定时操作*/
		        
		        
		        //2、页面加载函数
        		 $(function(){
        		 	//设置定时操作
        		 time=  setInterval("ShowAd()",3000);
        		 });
        		 //获取广告图片的元素
        		 function ShowAd(){
        		 	//在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())
        		 $("#img2").show();
        		 //$("#img2").slideDown(5000);
        		 	//清除定时操作
        		 	clearInterval(time);
        		 	//设置隐藏图片的定时操作
        		 time=setInterval("hiddend()",3000);
        		 }
        			
        		 function hiddend(){
        		 	//获取广告图片，并让其隐藏
        		 	$("#img2").hide();
        		 	//$("#img2").slideUp(5000);
        		 	//清除隐藏图片的定时操作
        		 	clearInterval(time);
        		 }
		
		
		</script>

		
	</head>

	<body onload="init()">
		<div id="father">

			<!-- 定时弹出广告的图片的位置-->
			<img src="../../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display:none" id="img2" />

			<!--1.logo部分-->
			<div id="logo">
				<div class="top">
					<img src="../../img/logo2.png" height="46px" />
				</div>
				<div class="top">
					<img src="../../img/header.png" height="46px" />
				</div>
				<div class="top" id="top">
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>
			<div id="clear">

			</div>
			<!--2.导航栏部分-->
			<div id="menu">
				<ul>
					<a href="#">
						<li style="font-size: 20px;">首页</li>
					</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<li>手机数码</li>
					</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<li>家用电器</li>
					</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<li>鞋靴箱包</li>
					</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<li>孕婴保健</li>
					</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<li>奢侈品</li>
					</a>
				</ul>
			</div>
			<!--3.轮播图部分-->
			<div id="">
				<img src="../../img/1.jpg" width="100%" id="img1" />
			</div>
			<!--4.最新商品-->
			<div id="product">
				<div id="product_top">
					&nbsp;&nbsp;&nbsp;
					<span style="font-size: 25px;padding-top: 8px;">最新商品</span>&nbsp;&nbsp;&nbsp;
					<img src="../../img/title2.jpg" />
				</div>
				<div id="product_bottom">
					<div id="product_bottom_left">
						<img src="../../img/big01.jpg" width="100%" height="100%" />
					</div>
					<div id="product_bottom_right">
						<div id="big">
							<a href="#"><img src="../../img/middle01.jpg" width="100%" height="100%" /></a>
						</div>
						<div class="small">
							<img src="../../img/small03.jpg" />
							<a href="#">
								<p style="color: gray;">电炖锅</p>
							</a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../../img/small03.jpg" />
							<a href="#">
								<p style="color: gray;">电炖锅</p>
							</a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../../img/small03.jpg" />
							<a href="#">
								<p style="color: gray;">电炖锅</p>
							</a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../../img/small03.jpg" />
							<a href="#">
								<p style="color: gray;">电炖锅</p>
							</a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../../img/small03.jpg" />
							<a href="#">
								<p style="color: gray;">电炖锅</p>
							</a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../../img/small03.jpg" />
							<a href="#">
								<p style="color: gray;">电炖锅</p>
							</a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../../img/small03.jpg" />
							<a href="#">
								<p style="color: gray;">电炖锅</p>
							</a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../../img/small03.jpg" />
							<a href="#">
								<p style="color: gray;">电炖锅</p>
							</a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../../img/small03.jpg" />
							<a href="#">
								<p style="color: gray;">电炖锅</p>
							</a>
							<p style="color: red;">¥399</p>
						</div>
					</div>
				</div>
			</div>
			<!--5.广告图片-->
			<div id="">
				<img src="../../img/ad.jpg" width="100%" />
			</div>
			<!--6.热门商品-->
			<div id="product">
				<div id="product_top">
					&nbsp;&nbsp;&nbsp;
					<span style="font-size: 25px;padding-top: 8px;">热门商品</span>&nbsp;&nbsp;&nbsp;
					<img src="../../img/title2.jpg" />
				</div>
				<div id="product_bottom">
					<div id="product_bottom_left">
						<img src="../../img/big01.jpg" width="100%" height="100%" />
					</div>
					<div id="product_bottom_right">
						<div id="big">
							<a href="#"><img src="../../img/middle01.jpg" width="100%" height="100%" /></a>
						</div>
						<div class="small">
							<img src="../../img/small03.jpg" />
							<a href="#">
								<p style="color: gray;">电炖锅</p>
							</a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../../img/small03.jpg" />
							<a href="#">
								<p style="color: gray;">电炖锅</p>
							</a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../../img/small03.jpg" />
							<a href="#">
								<p style="color: gray;">电炖锅</p>
							</a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../../img/small03.jpg" />
							<a href="#">
								<p style="color: gray;">电炖锅</p>
							</a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../../img/small03.jpg" />
							<a href="#">
								<p style="color: gray;">电炖锅</p>
							</a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../../img/small03.jpg" />
							<a href="#">
								<p style="color: gray;">电炖锅</p>
							</a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../../img/small03.jpg" />
							<a href="#">
								<p style="color: gray;">电炖锅</p>
							</a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../../img/small03.jpg" />
							<a href="#">
								<p style="color: gray;">电炖锅</p>
							</a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../../img/small03.jpg" />
							<a href="#">
								<p style="color: gray;">电炖锅</p>
							</a>
							<p style="color: red;">¥399</p>
						</div>
					</div>
				</div>
			</div>
			<!--7.广告图片-->
			<div id="">
				<img src="../../img/footer.jpg" width="100%" />
			</div>
			<!--8.友情链接和版权信息-->
			<div id="bottom">
				<a href="#">关于我们</a>
				<a href="#">联系我们</a>
				<a href="#">招贤纳士</a>
				<a href="#">法律声明</a>
				<a href="#">友情链接</a>
				<a href="#">支付方式</a>
				<a href="#">配送方式</a>
				<a href="#">服务声明</a>
				<a href="#">广告声明</a>
				<p>
					Copyright © 2005-2016 传智商城 版权所有
				</p>
			</div>
		</div>
	</body>

</html>

效果：

真香号
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Web前端（四）jQuery (1) jQ重写广告弹出
PizAn的博客
11-18 266
Date：2018/11/18 重写广告弹出 源代码： 1、书写定时广告图片的定时操作 time = setInterval(&amp;quot;showAd()&amp;quot;,3000); 2、书写显示广告的函数 function showAd() 3、获取广告图片，并显示 $(&amp;quot;#img2&amp;quot;).show(4000); 4、清除显示图片的定时操作 clearInterval(time); 5、设置隐藏
利用jquery 清理iframe/webview广告的方法 屏蔽网页广告 apicloud webBrowser uniapp
小刚刚技术博客
08-19 1202
手机看小说或者用vip解析接口看电影时总会有各种广告,针对不同类型的广告,来用jquery移除它们。原理很简单利用jquery选择器来移除或替换他们。
JQ简单的广告功能
刀刀宅
06-16 352
JQ简单的广告功能
jQ广告横向滚动
peijiajing的博客
03-25 163
*{ box-sizing: border-box; } .gunDong{ background-color: #F4F4F4; height:30px; border-radius:5px; color: #F85E6E; font-size: 16px; line-height: 30px; box-sizing: border-box; /* padding: 0px 5px; */ margin: 20px 0; } .gunDong ul{ he
jquery漂浮广告代码
front_end_fan
09-04 7535
jquery漂浮广告代码有好多种实现方式，本文介绍的这种方法应该算得上是简单、实用、逻辑清晰的方法了。 jquery漂浮广告代码 × --> var xin = true, yin = true; var step = 1; var delay = 10; var $obj; $(function() { $obj =
基于JQuery实现页面定时弹出广告
10-15
**基于JQuery实现页面定时弹出广告**\n\n在网页设计中，有时我们需要实现一些交互功能，如定时弹出广告，以吸引用户的注意力。本文将详细介绍如何利用JQuery库来实现在用户打开页面后，经过特定时间间隔自动弹出广告...
确认按钮弹出框jq.zip
10-19
标题中的“确认按钮弹出框jq.zip”表明这是一个关于使用jQuery实现确认按钮弹出框的示例代码包。在这个项目中，我们很可能会看到如何利用jQuery的交互功能来创建一个用户友好的对话框，用于在执行关键操作前获取用户...
JQ鼠标经过标题向上弹出特效
11-17
4. **CSS样式**：使用CSS为标题和弹出框添加样式，以符合项目需求。例如，可以调整弹出框的位置、大小、颜色等。 ```css .title { cursor: pointer; /* 设置鼠标指针为手型 */ } .popup { position: ...
jq实现点击图片弹出大图
09-28
在网页设计中，jQuery（通常简称为jq）是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。本教程将详细讲解如何使用jQuery实现点击图片后弹出大图的功能，这是一个常见的交互设计需求，能提升...
jq多选弹出.zipjq多选弹出.zipjq多选弹出.zip
10-19
标题中的"jq多选弹出.zip"显然指的是一个使用jQuery库实现的多选弹出框功能的项目。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在这个项目中，开发人员可能利用jQuery...
jquery实现弹窗表单填写提交
03-21
本资源是我个人修改完成的 功能是：点击按钮实现弹窗，弹窗中有表单，可以进行填写表单的内容并可进行提交！
JQ弹出窗口多种
01-04
各种效果弹窗。美观实用。绝对满意，多达10几种。调用方便
使用js实现轮播图效果
dxm809的博客
08-29 202
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首页</title> <style> #father{ border: 0px solid red; width: 1300px; height: 2170px; margin: auto; } /*#logo{ border: 0p.
jQuery 弹窗广告
小羽向前跑
02-26 1093
最终效果 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;46-弹窗广告&lt;/title&gt; &lt;style&gt; *{
jquery动态创建小广告
dxm809的博客
03-27 232
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;    &lt;title&gt;&lt;/title&gt; &lt;meta charset="utf-8&quot
弹出广告简洁的jquery特效
柚的个人技术博客
06-09 3155
BOSS需要一个首页弹出广告的特效，于是webhao在粽子节前夕，熬夜做出一个手机端广告弹出特效，点击tochch me小手，出现一个带有白色幕布和广告图片的背景，再次点击屏幕效果消失，首页恢复正常。 jQuery代码： $(function(){ //可视窗口的宽度,高度 var width=$(window).width(); var height=$(window).he
用jQuery实现广告轮播的效果
java_zhaoyanli的专栏
08-01 7129
图片轮播 jq(左右切换) body, div, ul, li, a, img { margin: 0; padding: 0; } ul, li { list-style: none; } a { text-
jQuery实现广告弹窗
weixin_30586257的博客
03-16 1246
首先设置一个固定的窗口位于右下角，效果如下： 代码： jQuery实现广告弹窗.html 之后将该窗口初始设为隐藏，通过代码实现3秒自动显示，5秒自动隐藏，其效果如下： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <m...
php用jq实现弹出框
最新发布
05-24
可以使用 jQuery UI 中的对话框（Dialog）实现弹出框效果。以下是一个示例代码： 1. 引入jQuery和jQuery UI库 ```html <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

真香号

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值