js实现拉幕效果的广告代码
以下是一个使用JavaScript实现拉幕效果的广告代码示例：
```html
<!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(⑸0%, ⑸0%);
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">`中修改广告的具体内容。
1对1专业客服
24小时服务支持
365天无间断服务
5分钟快速响应
TOP