网页定时弹出广告

最新推荐文章于 2023-03-25 18:36:18 发布

云飞扬°

最新推荐文章于 2023-03-25 18:36:18 发布

阅读量538

点赞数

分类专栏： JQuery 文章标签：网页定时弹出广告

本文链接：https://blog.csdn.net/weixin_44706512/article/details/90312155

版权

JQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

网页定时弹出广告

步骤：

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

定时器：
setTimeout("showAd()",2000);//2秒后，显示图片
setTimeout("hideAd()",3000);//3秒后，隐藏图片

$("#img1").show(); //显示图片
$("#img1").slideDown(2000); //用2秒缓慢显示图片

$("#img1").hide(); //隐藏图片 
$("#img1").slideUp(2000); //用2秒缓慢隐藏图片


style="display: none;"表示将图片默认隐藏
<img src="../img/4.gif" id="img1" width="500px" style="display: none;"/>

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			//显示广告
			function showAd(){
				//$("#img1").show();//显示图片,或者用slideDown
				$("#img1").slideDown(2000);
				setTimeout("hideAd()",3000);//显示3秒后，隐藏图片
				
			}
			function hideAd(){
				//$("#img1").hide(); //隐藏图片 或者用slideUp
				$("#img1").slideUp(2000);
			}
				
			$(function(){
				setTimeout("showAd()",2000);//打开网页过2秒后，显示图片
			});		
		</script>	
	</head>
	<body>
		<!--style="display: none;将图片默认隐藏-->
		<img src="../img/4.gif" id="img1" width="500px" style="display: none;"/>
	</body>
</html>