用flex动画实现html的marquee功能

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:Application name="Spark_TextInput_textDisplay_horizontalScrollPosition_test"  
3.         xmlns:fx="http://ns.adobe.com/mxml/2009"  
4.         xmlns:s="library://ns.adobe.com/flex/spark"  
5.         xmlns:mx="library://ns.adobe.com/flex/halo">  
6.     
7.     <fx:Script>  
8.         <![CDATA[  
9.             protected function init():void {  
10.                 anim.stop();  
11.                 pth.valueFrom = 0;  
12.                 pth.valueTo = txtInput.textDisplay.contentWidth - txtInput.textDisplay.width;  
13.                 anim.play([txtInput.textDisplay]);  
14.             }  
15.         ]]>  
16.     </fx:Script>  
17.     
18.     <fx:Declarations>  
19.         <s:Animate id="anim"  
20.                 duration="10000"  
21.                 repeatBehavior="reverse"  
22.                 repeatCount="0"  
23.                 repeatDelay="500">  
24.             <s:motionPaths>  
25.                 <s:SimpleMotionPath id="pth"  
26.                         property="horizontalScrollPosition" />  
27.             </s:motionPaths>  
28.         </s:Animate>  
29.     </fx:Declarations>  
30.     
31.     <s:TextInput id="txtInput"  
32.             text="hello javaeye  hello javaeye hello javaeye hello javaeye  hello javaeye hello javaeye hello javaeye"  
33.             editable="false"  
34.             fontSize="24"  
35.             left="100" right="100"  
36.             horizontalCenter="0" verticalCenter="0"  
37.             creationComplete="init();"  
38.             resize="init();"  
39.             rollOver="anim.pause();"  
40.             rollOut="anim.resume();" />  
41.      
42. </s:Application>