flex 简单跑马灯效果(竖着显示)
<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(); }