flex 简单跑马灯效果(竖着显示)

时间:2021-12-24 02:15:52
<mx:Move id="move_area" target="{VBox_AreaWarning}"/>   //move效果,模拟跑马灯

<s:BorderContainer   borderVisible="false" height="80" >
<s:BorderContainer id="border_area" top="15" height="100%"
borderVisible="false">
<s:layout> //flex4的layout还是很好用的,没那么麻烦
<s:VerticalLayout paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" gap="0" clipAndEnableScrolling="true" > //clipAndEnableScrolling必须为true否则内容会跑出范围
</s:VerticalLayout>
</s:layout>
<mx:VBox id="VBox_AreaWarning" x="0" mouseOver="VBox_AreaWarning_mouseOverHandler(event)" mouseOut="VBox_AreaWarning_mouseOutHandler(event)"> //把跑马灯的内容放进vbox里,尤其适合多条记录同时滚动的效果 </mx:VBox>
</s:BorderContainer>
<s:Label x="10" y="0" fontFamily="宋体" fontWeight="bold" text="【区域告警】"/>
</s:BorderContainer>

这里画出一个bordercontainer,在里面做跑马灯效果

move_area.yFrom = border_area.height;
move_area.yTo = -x.length*15; //如果动态载入内容,推荐根据记录条数去算y移动到的位置,vbox的高度是算不出来的,静态的直接用高度吧
move_area.repeatCount = 0; //loop
move_area.repeatDelay = 0; //loop time
move_area.duration = 6000; //the time of scroll once
move_area.play(); 必须为move_area添加以上属性用以循环 //mouseover时停止滚动 protected function VBox_AreaWarning_mouseOverHandler(event:MouseEvent):void
{
move_area.pause();
} //mouseout时从停止的地方继续
protected function VBox_AreaWarning_mouseOutHandler(event:MouseEvent):void
{
move_area.resume();
}