qooxdoo中qx.ui.basic.Label跑马灯效果实现方案咨询

由于HTML原生<marquee>标签已被废弃，用CSS动画是最稳妥的替代方案，下面是针对Qooxdoo的qx.ui.basic.Label组件的具体实现步骤：

1. 定义CSS动画样式 #

你可以通过应用主题或者动态添加CSS规则的方式，定义跑马灯所需的样式和动画：

/* 基础样式：确保文本不换行、溢出隐藏 */
.marquee-label {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}

/* 激活跑马灯动画的类 */
.marquee-label.marquee-active {
  animation: marquee 10s linear infinite;
}

/* 核心滚动动画：从初始位置平移到文本宽度的负方向 */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 可选：鼠标悬停暂停动画，提升交互体验 */
.marquee-label.marquee-active:hover {
  animation-play-state: paused;
}

如果需要动态添加CSS（无需修改主题文件），可以用Qooxdoo的qx.bom.Stylesheet API：

qx.bom.Stylesheet.addRule(".marquee-label", "white-space: nowrap; overflow: hidden; display: inline-block;");
qx.bom.Stylesheet.addRule(".marquee-label.marquee-active", "animation: marquee 10s linear infinite;");
qx.bom.Stylesheet.addRule("@keyframes marquee", "0% { transform: translateX(0); } 100% { transform: translateX(-100%); }");
qx.bom.Stylesheet.addRule(".marquee-label.marquee-active:hover", "animation-play-state: paused;");

2. 配置Label组件并动态控制动画 #

创建Label时添加基础样式类，然后通过判断文本是否溢出容器，动态开启/关闭动画：

// 创建带固定宽度的Label（模拟空间不足场景）
const longTextLabel = new qx.ui.basic.Label("这是一段超长的测试文本，当Label宽度不足以容纳时会自动触发跑马灯滚动效果");
longTextLabel.setWidth(250);
longTextLabel.addCssClass("marquee-label");

// 检查文本是否溢出的函数
const toggleMarquee = () => {
  const domElement = longTextLabel.getContentElement().getDomElement();
  if (domElement.scrollWidth > domElement.clientWidth) {
    longTextLabel.addCssClass("marquee-active");
  } else {
    longTextLabel.removeCssClass("marquee-active");
  }
};

// 初始化检查
toggleMarquee();

// 监听窗口 resize 和 Label 内容变化，实时调整动画状态
qx.event.Registration.addListener(window, "resize", toggleMarquee);
longTextLabel.addListener("changeValue", toggleMarquee);

// 将Label添加到容器中
this.getRoot().add(longTextLabel, {left: 50, top: 50});

关键说明 #

• 动画时长10s可以根据需求调整，数值越大滚动越慢
• scrollWidth > clientWidth的判断确保只有文本真正溢出时才启动动画，避免短文本无效滚动
• 鼠标悬停暂停动画的逻辑可以根据产品需求选择是否保留

内容的提问来源于stack exchange，提问作者goldim