js

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

小云
105
2023-08-09 12:23:22
栏目: 编程语言
前端开发者专用服务器,限时0元免费领! 查看>>

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

<!DOCTYPE html>

<html>

<head>

    <style>

        #adContainer {

            position: fixed;

            top0;

            left0;

            width100%;

            height100vh;

            background-color#000;

            z-index9999;

            overflow: hidden;

            animation: pullCurtain 4s ease-in-out forwards;

        }

        @keyframes pullCurtain {

            0% {

                height100%;

            }

            50% {

                height50%;

            }

            100% {

                height0;

            }

        }

        

        #adContent {

            position: absolute;

            top50%;

            left50%;

            transformtranslate(-50%, -50%);

            color#fff;

            font-size24px;

        }

    </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">中修改广告的具体内容。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

相关推荐:js如何实现拉幕效果的广告

0
看了该问题的人还看了