flex图片在容器内首位相接的移动方法
这个功能的实现耗费我好久的时间,越来越觉得flex功能的强大,其中外面容器的选择很重要。
View Code
1 <fx:Script> 2 <![CDATA[ 3 import mx.events.MoveEvent; 4 5 import org.osmf.events.TimeEvent; 6 private static const STEP:int=1; 7 private var timer:Timer; 8 private function init():void{ 9 reImages.y=tgImages.height;//首位相接的重要代码 10 timer=new Timer(40); 11 timer.addEventListener(TimerEvent.TIMER,startMove); 12 timer.start(); 13 14 } 15 private function startMove(event:Event):void{ 16 tgImages.y-=STEP; 17 reImages.y-=STEP; 18 if(tgImages.y+tgImages.height<0) 19 { 20 tgImages.y=tgImages.height; 21 22 } 23 else if(reImages.y+tgImages.height<0) 24 { 25 reImages.y=reImages.height; 26 } 27 } 28 protected function stopMove(event:MouseEvent):void{ 29 Mouse.cursor=MouseCursor.BUTTON; 30 timer.stop(); 31 } 32 protected function reStartMove(event:MouseEvent):void{ 33 timer.start(); 34 } 35 ]]> 36 </fx:Script> 37 <mx:VBox width="80" height="330" verticalScrollPolicy="off" horizontalScrollPolicy="off"> 38 <s:VGroup width="80" height="330" id="tgImages" gap="0" verticalCenter="0" mouseOver="stopMove(event)" 39 mouseOut="reStartMove(event)" > 40 41 <mx:Image source="img/洛川纪念馆.jpg" width="80" height="66" toolTip="洛川纪念馆" scaleContent="true" maintainAspectRatio="false"/> 42 <mx:Image source="img/清凉山旧址1.jpg" width="80" height="66" toolTip="清凉山旧址" scaleContent="true" maintainAspectRatio="false"/> 43 <mx:Image source="img/四八烈士陵园.jpg" width="80" height="66" toolTip="四八烈士陵园" scaleContent="true" maintainAspectRatio="false"/> 44 <mx:Image source="img/王家坪旧址.jpg" width="80" height="66" toolTip="王家坪旧址" scaleContent="true" maintainAspectRatio="false"/> 45 <mx:Image source="img/王家湾毛主席旧居.jpg" width="80" height="66" toolTip="王家湾毛主席旧居" scaleContent="true" maintainAspectRatio="false"/> 46 </s:VGroup> 47 <s:VGroup id="reImages" height="330" width="80" gap="0" verticalCenter="0" mouseOver="stopMove(event)" 48 mouseOut="reStartMove(event)" > 49 <mx:Image source="img/洛川纪念馆.jpg" width="80" height="66" toolTip="洛川纪念馆" scaleContent="true" maintainAspectRatio="false"/> 50 <mx:Image source="img/清凉山旧址1.jpg" width="80" height="66" toolTip="清凉山旧址" scaleContent="true" maintainAspectRatio="false"/> 51 <mx:Image source="img/四八烈士陵园.jpg" width="80" height="66" toolTip="四八烈士陵园" scaleContent="true" maintainAspectRatio="false"/> 52 <mx:Image source="img/王家坪旧址.jpg" width="80" height="66" toolTip="王家坪旧址" scaleContent="true" maintainAspectRatio="false"/> 53 <mx:Image source="img/王家湾毛主席旧居.jpg" width="80" height="66" toolTip="王家湾毛主席旧居" scaleContent="true" maintainAspectRatio="false"/> 54 </s:VGroup> 55 </mx:VBox>
之前用的是<s:boadercontainer>两个Vgroup不能重叠的显示,最后换成了早期版本的Vbox.