javascript制作页面广告出现、关闭效果

最新推荐文章于 2023-12-01 10:00:00 发布

原创最新推荐文章于 2023-12-01 10:00:00 发布

· 914 阅读

8 ·

版权

文章标签：

#JavaScript

新手专栏收录该内容

40 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		#ad{
			width: 350px;
			height: 280px;
			background-color: #999;
			position: absolute;
			right: 15px;
			bottom: 10px;
			opacity: 0;
			transition: all 2s;
		}
		p{
			width: 100%;
			height: 35px;
			background-color: skyblue;
			color: white;
			line-height: 35px;
		}
		.btn-close{
			display: inline-block;
			width: 32px;
			height: 35px;
			background-color: red;
			opacity: 0.5;
			float: right;
			text-align: center;
			font-size: 20px;
		}
		.btn-close:hover{
			opacity: 0.8;
			cursor: pointer;
		}
		#content{
			text-align: center;
			width: 100%;
			height: 245px;
			line-height: 245px;
		}
	</style>
</head>
<body>
	<div id="ad">
		<p><span>标题</span><span class="btn-close">&times;</span></p>
		<div id="content">
			<span>一刀boss秒</span>
		</div>
	</div>

	<script type="text/javascript">
		window.onload=init;
		function init(){
			var o=document.querySelector('#ad');
			//广告窗两秒钟之后出现
			//setInterval(function(){o.style.display='block';},2000);

			//淡入效果
			setTimeout(function(){
				o.style.opacity=1;
			},2000);

			document.querySelector('.btn-close').onclick=function(){
				//o.style.display='none';
				o.style.opacity=0;
			};
		}
	</script>
</body>
</html>