JS 案例仿QQ新闻广告

suiferq

于 2021-06-07 14:48:33 发布

阅读量180

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 案例学习文章标签： js

本文链接：https://blog.csdn.net/suiferq/article/details/116802231

JS 案例学习专栏收录该内容

29 篇文章

订阅专栏

这篇博客介绍了如何使用HTML、CSS和JavaScript来创建一个仿QQ新闻广告的效果。广告在页面加载时从底部向上展开，点击关闭按钮后则会消失。HTML定义了一个固定在屏幕底部右侧的广告div，CSS设置了广告的样式和关闭按钮的位置，JavaScript部分实现了广告的动画展开和点击关闭的功能。通过定时器逐步改变广告的底部位置实现平滑展开，同时为关闭按钮添加了点击事件监听器，用于隐藏广告。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

仿QQ新闻广告

要求：

打开页面，广告向上展开，点击“关闭”按钮，关闭广告

HTML和CSS代码片:

// CSS 代码
<style type="text/css">
	.adv{
		width: 400px;
		height: 300px;
		background: url(../img/tx.jpg);
		position: absolute;
		bottom: -200px;
		right: 0;
		}
	.adv>span{
		position: absolute;
		right: 0;
		top: -12px;
		font-size: 48px;
		font-weight: 12px;
		color: red;
	}
</style>


// HTML 代码
<div style="position: fixed; bottom: 0; right: 0;">
	<div id="adv" class="adv">
		<span id="close">&times;</span>
	</div>
</div>

JS代码片：

<script type="text/javascript">
			var myadv=document.getElementById("adv");
			var myclose=document.getElementById("close");
			var b=-300;
			myclose.onclick=function(){
				myadv.style.display="none";
			}
			function advUp(){
				myadv.style.bottom=b+"px";
				b+=10;
				var timer=setTimeout("advUp()",100);
				if(b>0){
					clearTimeout(timer);
				}
			}
			advUp()
		</script>