91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

js實現拉幕效果的廣告代碼

js
小云
103
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
昌乐县| 呼图壁县| 余姚市| 峨山| 来宾市| 棋牌| 洛宁县| 常熟市| 汝城县| 屏边| 涞水县| 汝州市| 汉阴县| 景泰县| 库尔勒市| 阿合奇县| 巩留县| 手游| 香港| 施甸县| 犍为县| 那曲县| 江陵县| 沂源县| 安泽县| 隆德县| 鹤壁市| 西乌| 南溪县| 凤阳县| 台东市| 信丰县| 汤原县| 武功县| 舒兰市| 兖州市| 合作市| 大连市| 鄄城县| 乐至县| 楚雄市|