Marquee滚动 - 图1

Marquee 滚动

基本用法

  1. import { Marquee, Cell } from 'zarm';
  2. ReactDOM.render(
  3. <>
  4. <Cell>
  5. <Marquee animationDelay={2000} animationDuration={30000}>
  6. <div>我延迟执行2秒,从右向左滚动,字有点多,我走慢点</div>
  7. </Marquee>
  8. </Cell>
  9. <Cell>
  10. <Marquee direction="right" width="100%">
  11. <div>我从左向右滚动</div>
  12. </Marquee>
  13. </Cell>
  14. <Cell>
  15. <Marquee direction="up" height={60}>
  16. <div>我</div>
  17. <div>从</div>
  18. <div>下</div>
  19. <div>往</div>
  20. <div>上</div>
  21. <div>滚</div>
  22. <div>动</div>
  23. </Marquee>
  24. </Cell>
  25. <Cell>
  26. <Marquee direction="down" height={60}>
  27. <div>我</div>
  28. <div>从</div>
  29. <div>上</div>
  30. <div>往</div>
  31. <div>下</div>
  32. <div>滚</div>
  33. <div>动</div>
  34. </Marquee>
  35. </Cell>
  36. </>
  37. , mountNode);

API

属性类型默认值说明
directionstring'left'滚动方向,可选值为leftrightupdown
widthnumber | string-容器宽度
heightnumber | string-容器高度
loopbooleantrue是否循环
animationDurationnumber6000动画执行时间(单位:毫秒)
animationDelaynumber0动画延迟执行时间(单位:毫秒)