卡片 · card-roll 滚动卡
卡片家族
索引
base
cpanel
crumb
full
page
border
radius
api
artic
namecode
imgs
tips
total
default
box
checkbox
form
form-item
form-inpselect
table
pager
multipled
menubar
mode
menus
tabmenu
code
json
template
tab
slide
paginate
tree
toggle
marquee
timeaxis
waterfall
popup
nav
chatbox
drag
choose
progress
roll
滚动卡
card-roll:无缝滚动窗——100% 全尺寸 + overflow:hidden,内部 roll-win 位移容器,条目 roll-item 相对定位、active 项主色高亮;roll-none 变体横向单行(win 全宽滚动、item 行内排列)。速度 / 方向由引擎参数接管。
结构
<div class="card card-roll" data-direct="vertical">
<div class="roll-win">
<div class="roll-content">
<div class="roll-item">数据 1</div>
<div class="roll-item active">数据 2</div>
</div>
</div>
</div>
<div class="card card-roll roll-none">
<div class="roll-win"><div class="roll-content">
<div class="roll-item">横向项</div>
</div></div>
</div>
| data-direct | 方向:vertical 纵向 / roll-none 横向单行 |
| roll-win | 位移层,滚动动画作用于此 |
| roll-item.active | 当前项主色高亮(红/主色双定义,主色生效) |
注意项
a: 由引擎自动初始化并持续滚动(页面内裸放会动,故用代码块演示)。
b: 联系式滚动需把内容复制一份实现无缝;速度在初始化参数中配置。
c:
roll-none 适合横向跑分 / 公告条(win 全宽、内容 max-content)。
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI ·
返回首页