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();
   }

 

你可能感兴趣的:(Flex)