AxureRP教程–滚动字幕效果

这里介绍的滚动字幕效果与前面《AxureRP教程–跑马灯效果》里面的从下往上滚动的效果一致,只是提供了一种新的方式来实现鼠标悬停效果,这里是用移动动态面板的位置来实现,控制基本上不在动态面板上,只要做好内容的显示控制就可以了。不过个人感觉这种方式应用的意义不大,原因就是很难把这样的效果部署到网站的某个特定的位置去。

单单有滚动效果,不带鼠标悬停的功能相信大家基本上都会了,那个控制比较简单,不需要考虑当前滚动状态在鼠标移入后的停滞状态,以及鼠标移出后的接续状态。这里是用三个页面来实现,页面一实现了滚动效果,页面二则用来做停滞状态的显示,页面三则用来做接续状态的显示以及跳转。

实现原理是默认滚动效果都在页面一上实现,以变量的值来记录各个滚动的状态,当鼠标进入控制区域后,页面跳转至页面二,并将记录的状态值跳转至一个新的变量,以此来控制页面二上面的停滞状态显示,当鼠标移出后,页面跳转至页面三,页面三根据页面二上的停滞状态,将剩余的状态都滚动演示完之后,重新加载页面一,这样就完成了一个滚动内容不间断显示的效果。

这里的难点是变量的赋值,因这里是通过移动动态面板来实现的,不是状态转换,因此需要记录每移动一个固定的位移量之后改变一次变量的值,并要记录下这个值所对应的面板的坐标;再就是在页面三的时候,要根据每个值所对应的坐标,将剩下的位移量移动完之后才重新加载页面一,这样就实现了延续状态的滚动显示,不会有间断。从下图也可以看到,页面三的页面加载事件是很复杂的。

两个灰色矩形框是用来挡住不显示的动态面板内容的,呵呵,所以说这个方式比较傻,纯是为了实现效果而设计的方式,供大家参考,详细的可以参考源文件。

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

 

点此查看演示

点此下载源文件



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

评论已关闭!