js实现对联广告，弹出效果

最新推荐文章于 2024-09-22 11:17:00 发布

科技梦想家

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量412

点赞数 3

分类专栏： html 前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_42234082/article/details/142421238

版权

html 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

以下是一个通过JavaScript实现一个简单的对联广告弹出效果的示例代码：

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>对联广告</title>
    <style>
        .ad-banner {
            position: fixed;
            top: 50%;
            z-index: 9999;
            background-color: #fff;
            padding: 10px;
            border: 1px solid #ccc;
            transform: translateY(-50%);
        }
        .ad-banner-left {
            left: 0;
        }
        .ad-banner-right {
            right: 0;
        }
    </style>
</head>
<body>
    <div class="ad-banner ad-banner-left">
        <img src="left-banner.jpg" alt="Left Banner">
    </div>
    <div class="ad-banner ad-banner-right">
        <img src="right-banner.jpg" alt="Right Banner">
    </div>

    <script src="ad.js"></script>
</body>
</html>

JavaScript代码（ad.js）：

window.addEventListener('DOMContentLoaded', function() {
    var leftBanner = document.querySelector('.ad-banner-left');
    var rightBanner = document.querySelector('.ad-banner-right');

    setTimeout(function() {
        leftBanner.style.transform = 'translateX(-100%)';
        rightBanner.style.transform = 'translateX(100%)';
    }, 2000);

    setTimeout(function() {
        leftBanner.style.display = 'none';
        rightBanner.style.display = 'none';
    }, 4000);
});

注意：上述代码假设存在名为left-banner.jpg和right-banner.jpg的图像文件，您需要使用实际的图像URL替换这些占位符。此外，您也可以使用CSS来自定义弹出效果，这里的示例只是一个简单的示例，您可以根据需求进行修改和调整。