实现的效果:中间每隔几秒就向上反动一下滚动广告。当鼠标悬停在广告上时,滚动条不在滚动,点击广告可以链接到其他地方。
下面是核心代码部分:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import flash.net.navigateToURL;
[Bindable]
private var title:String;
[Bindable]
private var link:String;
override public function set data(value:Object):void{
super.data = value;
this.title = value.title;
this.link = value.link;
invalidateDisplayList();
}
protected function clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
navigateToURL(new URLRequest(this.link),'_blank');
}
]]>
</fx:Script>
<mx:LinkButton label="{title}" click="clickHandler(event)" width="240" id="moveText" fontSize="15" rollOverColor="#ffaa00" selectionColor="16777215"/>
</s:ItemRenderer>
下面是List的itemrenderer部分:
1 <?xml version="1.0" encoding="utf-8"?>
2 <s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
3 xmlns:s="library://ns.adobe.com/flex/spark"
4 xmlns:mx="library://ns.adobe.com/flex/mx" width="100%"
5 creationComplete="creationCompleteHandler(event)"
6 horizontalCenter="0" borderVisible="false">
7 <fx:Script>
8 <![CDATA[
9
10 import mx.events.FlexEvent;
11
12 private var timer:Timer;
13 private var PreListy:Number;//记录list移动之前的y坐标
14
15 private var afterListy:Number; //移动之后的list的y坐标
16
17 protected function creationCompleteHandler(event:FlexEvent):void
18 {
19 timer=new Timer(3000);
20 timer.addEventListener(TimerEvent.TIMER,onTimer);
21 timer.start();
22 PreListy=promotionList.y;//记录list向上移动之前的y坐标
23 }
24
25 private function onTimer(event:TimerEvent):void
26 {
27 move_up.yFrom=promotionList.y;
28 move_up.yTo=promotionList.y-25;
29 move_up.play();
30 afterListy=promotionList.y;
31 var i:Number=PreListy-afterListy
32 if(i>=40)
33 {
34 change(); //移动到原来的位置
35 }
36 }
37
38 private function change():void
39 {
40 move_up.yFrom=promotionList.y;
41 move_up.yTo=promotionList.y+50;
42 move_up.play();
43 }
44
45 private function move_pause():void
46 {
47 move_up.pause();
48 timer.stop();
49 }
50 private function move_resume():void
51 {
52 move_up.resume();
53 timer.start();
54 }
55
56 ]]>
57 </fx:Script>
58
59 <s:BorderContainer height="50" backgroundColor="#00eeeeee">
60 <s:List id="promotionList" dataProvider="{ model.promotionInfos}" borderVisible="false"
61 itemRenderer="PromotionInfoItemRenderer" verticalScrollPolicy="off" rollOver="move_pause()" rollOut="move_resume()">
62 <s:layout>
63 <s:TileLayout requestedColumnCount="3" horizontalGap="2" verticalGap="2" />
64 </s:layout>
65 </s:List>
66 </s:BorderContainer>
67
68 </s:BorderContainer>