# 滚动公告

一行向左滚动的公告文字，首尾无缝衔接；悬停或聚焦时暂停；系统开启“减少动态效果”时不滚动，改为可横向拖动。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<div data-zh-marquee data-speed="50" aria-label="公告">系统将在今晚 23:00 进行维护，预计 30 分钟。 <a href="#">查看详情</a></div>
```

## 样式类

`zh-marquee`、`zh-marquee-track`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `data-zh-marquee` | 容器 | 里面放文字或链接 | 声明为滚动公告；库会复制一份内容（对读屏隐藏）做无缝循环 |
| `data-speed` | 容器 | 像素每秒，默认 60 | 滚动速度 |

## 无障碍

- 复制出来的内容是 aria-hidden 且不可聚焦，读屏只读一遍
- 滚动的文字不好阅读：重要通知请同时用警告条常驻显示

## 常见问题

### 滚动公告是什么？

一行向左滚动的公告文字，首尾无缝衔接；悬停或聚焦时暂停；系统开启“减少动态效果”时不滚动，改为可横向拖动。

### 怎么使用滚动公告？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

### 滚动公告支持键盘和读屏吗？

复制出来的内容是 aria-hidden 且不可聚焦，读屏只读一遍；滚动的文字不好阅读：重要通知请同时用警告条常驻显示。

### 滚动公告需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。