js实现拉幕效果的广告代码
以下是一个使用JavaScript实现拉幕效果的广告代码示例：
<!DOCTYPE html>
<html>
<head>
<style>
#adContainer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #000;
z-index: 9999;
overflow: hidden;
animation: pullCurtain 4s ease-in-out forwards;
}
@keyframes pullCurtain {
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>
<div id="adContainer">
<div id="adContent">
这里是广告内容
</div>
</div>
<!-- 其他页面内容 -->
<script>
// 在页面加载完成后，移除广告容器
window.addEventListener('load', function() {
var adContainer = document.getElementById('adContainer');
adContainer.parentNode.removeChild(adContainer);
});
</script>
</body>
</html>
这段代码创建了一个固定定位的广告容器（<div id="adContainer">），并使用CSS动画（@keyframes pullCurtain）实现拉幕效果。动画从顶部到底部的高度逐渐变化，最终将广告内容隐藏。
在页面加载完成后，使用JavaScript移除了广告容器，以便在拉幕效果结束后不再显示广告。你可以在<div id="adContent">中修改广告的具体内容。
阅读剩余
THE END
