/* 广告样式：金红色底纹、固定样式、层级置顶 */
.notice-ad {
    position: absolute; /* 绝对定位用于移动 */
    top: 0;
    left: 0;
    padding: 12px 24px;
    background-color: #d43c33; /* 金红色底纹 */
    color: #fff; /* 白色文字 */
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    z-index: 9999; /* 置顶不被遮挡 */
    user-select: none; /* 禁止选中文字 */
    pointer-events: auto; /* 允许点击 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* 轻微阴影增强视觉 */
}

js:


// 获取广告元素和页面尺寸
const ad = document.getElementById('noticeAd');
let pageWidth = window.innerWidth;
let pageHeight = window.innerHeight;
let adWidth = ad.offsetWidth;
let adHeight = ad.offsetHeight;

// 移动速度（像素/毫秒），数值越小越慢
const speed = 0.5;
// 初始位置（左上角）
let x = 0;
let y = 0;
// 移动方向（初始向右下）
let dx = 1;
let dy = 1;

// 窗口大小变化时更新页面尺寸（适配响应式）
window.addEventListener('resize', () => {
    pageWidth = window.innerWidth;
    pageHeight = window.innerHeight;
});

// 核心移动函数
function moveAd() {
    // 更新位置
    x += dx * speed;
    y += dy * speed;

    // 边界检测：碰到右边界反向（x轴）
    if (x + adWidth >= pageWidth) {
        dx = -1;
    }
    // 碰到左边界反向（x轴）
    if (x <= 0) {
        dx = 1;
    }
    // 碰到下边界反向（y轴）
    if (y + adHeight >= pageHeight) {
        dy = -1;
    }
    // 碰到上边界反向（y轴）
    if (y <= 0) {
        dy = 1;
    }

    // 应用新位置
    ad.style.transform = `translate(${x}px, ${y}px)`;

    // 循环执行（浏览器刷新率同步，流畅无卡顿）
    requestAnimationFrame(moveAd);
}

// 点击跳转功能
ad.addEventListener('click', () => {
    window.open('https://www.xis-hao.fun/fun/gg/', '_blank'); // 新窗口打开链接
});

// 启动移动（页面加载完成后执行）
window.addEventListener('load', moveAd);