Axure实现通知栏消息滚动显示

时间:2024-10-14 08:56:51

1、创建一个新的文档

Axure实现通知栏消息滚动显示

2、创建文本标签,输入要连续滚动显示的内容。并将此标签转换成动态面板。

Axure实现通知栏消息滚动显示

3、打开动态面板,设置2个状态:起始状态和结束状态。 2个状态里面的内容都一样。

Axure实现通知栏消息滚动显示
Axure实现通知栏消息滚动显示

4、我们的目的是让 文本框 从右侧进入,左侧退出,循环往复。所以,首先要把文本标签从右至左,移出动态面板的区域,移动时间为20000ms。

Axure实现通知栏消息滚动显示
Axure实现通知栏消息滚动显示

5、然后移动当前文本标签回到原位置,并设置选中状态为:未选中。结束状态的标签 跟 起始状态的标签 一样设置。

Axure实现通知栏消息滚动显示
Axure实现通知栏消息滚动显示

6、第五步: 要设置动态面板的交互,“载入时”循环切换 面板状态,时间为20000ms,跟文本标签的移动时间保持一致。

Axure实现通知栏消息滚动显示

7、第六步:设置“状态改变时”,如果当前面板是“起始状态”,则选中起始状态中的 文本标签->起始标签

Axure实现通知栏消息滚动显示
Axure实现通知栏消息滚动显示

8、第六步:设置“状态改变时”,如果当前面板是“结束状态”,则选中结束状态中的 文本标签->结束标签。

Axure实现通知栏消息滚动显示

9、最后,预览 HTML 页面,就能看到循环移动的文本了。

Axure实现通知栏消息滚动显示
Axure实现通知栏消息滚动显示
© 手抄报圈