hum007

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.

posted on 2013-03-31 16:43  hum007  阅读(279)  评论(0编辑  收藏  举报

导航