js实现拉幕效果的广告代码

lewis 7年前 (2019-01-09) 阅读数 11 #程序编程

文章标签 js

以下是一个使用JavaScript实现拉幕效果的广告代码示例：

<!DOCTYPEhtml><html>
<head>
<style>
#adContainer{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background-color:#000;
z-index:9999;
overflow:hidden;
animation:pullCurtain4sease-in-outforwards;
}
@keyframespullCurtain{
0%{
height:100%;
}
50%{
height:50%;
}
100%{
height:0;
}
}
#adContent{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#fff;
font-size:24px;
}
</style>
</head>
<body>
<divid="adContainer">
<divid="adContent">
这里是广告内容
</div>
</div>
<!--其他页面内容-->
<script>
//在页面加载完成后，移除广告容器
window.addEventListener('load',function(){
varadContainer=document.getElementById('adContainer');
adContainer.parentNode.removeChild(adContainer);
});
</script>
</body>
</html>