如何购买
1
登录您的BeikeShop商城后台
2
点击右上角“插件市场”
3
选择需要购买的插件
4
购买&安装
插件描述
Scroll Text 滚动文本装修模块
概述
Scroll Text 是一个为商城后台「设计 → 装修」功能增加滚动文字公告展示模块的插件。它以跑马灯（Marquee）形式水平滚动展示多条富文本内容，支持丰富的样式定制和镂空效果。适合用于首页公告栏、品牌标语展示、促销信息轮播、活动提醒等场景。
主要功能
📜 滚动跑马灯文本
| 特性 | 说明 |
|---|---|
| 多条文本 | 支持添加多条富文本内容，自动循环滚动展示 |
| 无缝循环 | 内容复制两份，位移 50% 实现无限无缝滚动 |
| 镂空效果 | 文字可设置为镂空样式（仅描边，无填充），极具设计感 |
| 富文本支持 | 支持插入链接、加粗、换行等格式化内容 |
🎮 播放控制
| 特性 | 说明 |
|---|---|
| 滚动方向 | 支持向左 / 向右滚动 |
| 滚动速度 | 可设置 3~60 秒完成一次循环 |
| 悬停暂停 | 鼠标悬停时暂停滚动，提升交互体验 |
| 尊重减少动态偏好 | 检测 prefers-reduced-motion，自动禁用动画 |
📐 样式配置选项
| 配置项 | 说明 |
|---|---|
| PC 字体大小 | 可设置 12~80px |
| 移动端字体大小 | 可设置 10~60px |
| PC 间距 | 可设置 0~200px |
| 移动端间距 | 可设置 0~160px |
| 背景颜色 | 自定义跑马灯背景色 |
| 文本颜色 | 自定义文字颜色 |
| 模块宽度 | 窄屏(container) / 宽屏(container-fluid) / 全屏(w-100) |
技术特点
-
✅ 无缝无限滚动：使用 50% 位移技巧，内容复制两份实现无间隙循环
-
✅ 双向滚动：支持向左和向右两种滚动方向
-
✅ 镂空文字效果：使用
-webkit-text-stroke实现描边镂空，视觉独特 -
✅ 富文本支持：每条文本支持富文本内容，可插入链接、换行等
-
✅ 响应式间距：PC 和移动端可独立设置字体大小和间距
-
✅ 悬停暂停交互：鼠标悬停时滚动暂停，不遮挡交互
-
✅ 尊重用户偏好：自动检测
prefers-reduced-motion，用户偏好减少动画时禁用滚动 -
✅ 任意主题兼容：前台视图由插件自带，样式完全独立
-
✅ 装修编辑器完美支持：实时预览，支持多语言富文本编辑
适用场景
-
首页顶部/底部公告栏
-
品牌标语/口号展示
-
促销活动信息轮播
-
重要通知/提醒
-
滚动新闻/资讯
-
节日祝福语展示
