温馨提示×

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

js
小云
104
2023-08-09 12:23:22
栏目: 编程语言

以下是一个使用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">中修改广告的具体内容。


0