Axure实现“跑马灯”效果

场景描述:文字从右往左循环滚动。当鼠标移到文字上面,滚动则停止;当鼠标移出文字,滚动则继续。

Axure实现如下:

建立一个全局变量a(默认值为0,用户控制是否滚动),一个动态面板MB(动态面板设置为两个状态State1和State2,宽:350,高:30),一个承载文字的矩形控件Content(宽:780.,高25)。矩形控件在State1中的位置为(0,0),在State2中的位置为(351,0)。

全局变量a的取值及对应的功能如下:


动态面板MB的“鼠标移入时”事件和“鼠标移出时”事件产生的结果分别是:

(1)鼠标移入时:

· a=1

· MB切换至State1

(2)鼠标移出时:

· a=0

· MB切换至State2

由于变量a有两个取值,而动态面板MB也有两个状态,故动态面板MB“状态改变时”事件共有四种逻辑判断。四种判断及产生的事件结果如下:

(1)a=0 and MB=State1:

· Content相对位置移动至(1130,0)

· MB切换至State2

(2)a=0 and MB=State2:

· Content相对位置移动至(-1130,0),线性移动,耗时5000ms

· 等待5000ms

· MB切换至State1

(3)a=1 and MB=State1:

· Conetnt相对位置移动至(1130,0)

(4)a=1 and MB=State2:

· Content相对位置移动至(1130,0)

· MB切换至State1


设置“页面载入时”事件,产生的结果为:

· MB切换至State2(由于MB默认状态为State1,页面加载时状态变成State2即在页面开始时就触发了“动态面板改变时“事件)

注:上述为文字左右滚动的”跑马灯“效果,而诸如文字上下滚动的”通知“效果只需要将Content移动位置变成Y轴方向移动即可,如:(0,1130)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,043评论 25 709
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • Ubuntu的发音 Ubuntu,源于非洲祖鲁人和科萨人的语言,发作 oo-boon-too 的音。了解发音是有意...
    萤火虫de梦阅读 99,757评论 9 468
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 11,711评论 0 17
  • 几个月都过去了,还是不能释怀,还是不能完全的忘记,我不知道有多少人和我一样,受伤后,总是在幻想着各种可能,明知道不...
    空白和满溢阅读 1,046评论 0 0