网站底部滚动通知公告JS代码

作者:

在

在网站底部添加底部滚动通知公告JS代码,可用来紧急通知,活动信息推送。

代码如下:

<style>
        body {
            margin: 0;
        }

        #emergency-container {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #ffcc00; /* 黄色 */
            overflow: hidden;
        }

        #emergency-notice {
            white-space: nowrap;
            animation: scrollNotice 15s linear infinite;
        }

        @keyframes scrollNotice {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(-100%);
            }
        }
    </style>
    <script>
    // 创建通知容器元素
    var containerElement = document.createElement('div');
    containerElement.id = 'emergency-container';

    // 创建通知元素
    var noticeElement = document.createElement('div');
    noticeElement.id = 'emergency-notice';
    noticeElement.textContent = '由于机房11.15日故障,数据回滚现已恢复五月份数据,正在与机房交涉中; 期间带来的不变敬请谅解。';

    // 将通知元素添加到通知容器中
    containerElement.appendChild(noticeElement);

    // 将通知容器添加到body中
    //本代码来自zai1.com 在意博客
    document.body.appendChild(containerElement);
</script>

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注