AxureRP教程–跑马灯效果

跑马灯的效果应用也很多,一般网站上的动态新闻或者消息展示,都会采用跑马灯的效果,从左至右,从下往上,有时候也叫滚动效果,不过跑马灯效果通常指有时需要用一矩形条显示少量用户特别关心的信息,这条信息串首尾相连,向一个方向循环滚动,如证券业中常用“跑马灯”来显示不断变化的股票行情。但滚动效果的含义更广一些,包含了跑马灯效果。

用AxureRP来实现跑马灯效果,也用到了动态面板组件,实现原理是每隔一段时间移动动态面板,从左至右或从右至左,一般都用这种方式来实现,但从下往上或者从上往下的方式就有两种,一种还是移动动态面板的方法,另一种就是在显示固定高度和宽度的内容时可以用动态面板的状态切换来实现,如一次显示一条记录,一次显示一张图片这种情况。

简易的跑马灯效果是比较简单的,只要设置好每隔一段时间移动动态面板至相同的位移或切换一次状态即可,这里移动动态面板是要嵌套的,即要移动动态面板下的动态面板,做的示例大家看一下就明白了。比较简陋,如果想让位移变得平顺一些,可以将位移量分拆成几个等份,平顺的完成移动。自动循环的效果用OnPageLoad事件来实现

比较难的在于跑马灯效果上的鼠标悬停,鼠标放上去之后,滚动效果暂停,只显示当前状态,鼠标移出后继续滚动,这个在AxureRP里做比较复杂,需要设计好几个层,一个层做动态的自动滚动层,一个层做静态的手动切换层,一个层用来监视鼠标的移入移出。前面两个层用动态面板来做,第三个层可以用图片映射组件来做。在介绍幻灯片效果的时候,里面第二种带图片缩略图导航的幻灯片效果就是类似的原理来实现的,也有鼠标悬停效果,这里再提供一个例子,也是滚动图片的,是别人做的,大家可以参考。

鼠标悬停效果自己也设计了一种方式,不过好像对文字类得信息支持的不好,效果不是很明显,有缺陷,分别用了位移和状态切换两种方式来尝试,发现还是用位移的方式比较好,示例中放置的是最后用状态切换方式尝试的结果,大家可以看看,有什么意见或好的修改建议可以提出来。

示例在AxureRP 5.5版本下调试通过

 

点此查看演示

点此下载源文件

跑马灯效果示例源文件(AxureRP 6.0下运行) 点此下载

 



无觅相关文章插件,快速提升流量

“AxureRP教程–跑马灯效果”3 条评论

金金 | 2012-03-2 11:43 |
commenter

正好要用这个,看你的教程会了,谢谢~~~会多翻翻你博客里的教程,很感谢~

justqb | 2012-10-10 23:08 |
commenter

这个明显有bug。鼠标移上去了,虽然停下了不动了,但时间还在走。比如说第三条的时候鼠标移上去,等几秒,移开鼠标,显然下一个不是4.

commenter

位移确实是个好的实现方式