Flex 滚动

转载的demo :

老规矩,先上效果图。



Flex 源代码:共两个文件。

 ScrollTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="left" width="550" height="550" layout="vertical" xmlns:local="*">
	<mx:Label text="文字垂直滚动:" fontWeight="bold" fontSize="13"/>
	<mx:HBox>
		<local:flexMarquee width="245" height="200" mode="vb2t" dropShadowEnabled="false" durationTime="6000"
						   title="公告板" 
						   marqueeText="some text here<br>some text here<br>some text here"/>
		<local:flexMarquee width="245" height="200" mode="vt2b" dropShadowEnabled="false" durationTime="6000"
						   title="公告板" 
						   marqueeText="some text here<br>some text here<br>some text here"/>
	</mx:HBox>
	<mx:Label text="文字水平从右往左滚动:" fontWeight="bold" fontSize="13"/>
	<local:flexMarquee width="500" height="200" mode="hr2l" dropShadowEnabled="false" durationTime="7000"
					   title="公告板"
					   marqueeText="some text here<br>some text here<br>some text here"/>
	<mx:Label text="文字水平从右往左滚动(无标题,带HTML标签):" fontWeight="bold" fontSize="13"/>
	<local:flexMarquee width="500" height="200" mode="hr2l" dropShadowEnabled="false" durationTime="7000"
					   marqueeText="<font color='#ff0000'>1. some text here</font><br><font color='#ff0000'>2. <a href='http://sports.sina.com.cn/nba' target='_blank'>链接到新浪NBA</a></font><br>some text here"/>
	<mx:Label text="文字水平从左往右滚动:" fontWeight="bold" fontSize="13"/>
	<local:flexMarquee width="500" height="200" mode="hl2r" dropShadowEnabled="false" durationTime="7000"
					   title="公告板"
					   marqueeText="some text here<br>some text here<br>some text here"/>
</mx:Application>


flexMarquee.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="complete()"
		  fontSize="13" horizontalCenter="0" verticalCenter="0" borderThicknessLeft="2" borderThicknessBottom="2"
		  borderThicknessRight="2" borderThicknessTop="2">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			private var durationtime:Number;
			public var durationTime:Number=5000;
			public var mode:String="vb2t";//vb2t:下往上滚动;vt2b:上往下滚动;hl2r:左往右滚动;hr2l:右往左滚动
			public var marqueeText:String="flexMarquee text here<br>flexMarquee text here<br>flexMarquee text here<br>flexMarquee text here<br>flexMarquee text here<br>flexMarquee text here<br>flexMarquee text here<br>flexMarquee text here<br>flexMarquee text here<br>flexMarquee text here<br>flexMarquee text here<br>flexMarquee text here<br>flexMarquee text here<br>flexMarquee text here<br>flexMarquee text here<br>flexMarquee text here";
			
			private function complete():void
			{
				if(this.title==""){
					this.setStyle("headerHeight",0);
					//重新定义cs的高度
					cs.height+=28;
				}
				//假如没有标题,将PANEL的headerHeight设为0
				if(mode=="hl2r" || mode=="hr2l"){
					tt.height=25;
					this.height=(this.title==""?28:60);
					cs.height=23;
					tt.x=3;
					tt.y=1;
					var tempA:Array;
					if(marqueeText.indexOf("<br>")>=0){
						tempA=marqueeText.split("<br>");
						marqueeText=tempA.join("    ");
					}
					if(marqueeText.indexOf("<br>")>=0){
						tempA=marqueeText.split("<br>");
						marqueeText=tempA.join("    ");
					}
				}else{
					tt.width=cs.width-6;
					tt.x=3;
					tt.y=1;
				}
				tt.htmlText=marqueeText;
				tt.validateNow();
				if(mode=="hl2r" || mode=="hr2l"){
					durationtime=(tt.textWidth<=250?durationTime:Math.round(tt.textWidth/250*durationTime));
					trace(tt.textWidth);
				}else{
					durationtime=(tt.textHeight<=250?durationTime:Math.round(tt.textHeight/250*durationTime));
				}
				//设置文字。若为横向移动,将换行符改为适当的空格
				//根据不同模式调整区域大小及文字滚动的方向
				switch(mode){
					case "hl2r":
						
						move_up.xFrom=0-tt.textWidth+6;
						move_up.xTo=cs.width-6;
						break;
					case "hr2l":
						move_up.xFrom=cs.width-6;
						move_up.xTo=0-tt.textWidth+6;
						break;
					case "vt2b":
						move_up.yFrom=0-tt.textHeight+6;
						move_up.yTo=cs.height-6;
						break;
					default:
						//Alert.show(tt.height+"---"+tt.textHeight);
						move_up.yFrom=cs.height - 6;
						move_up.yTo=0 - tt.textHeight + 6;
				}
				move_up.repeatCount=0;
				//loop 
				move_up.repeatDelay=0;
				//loop time 
				move_up.duration=durationtime;
				//the time of scroll once 
				move_up.play();
			}
			private function move_pause():void
			{
				move_up.pause();
				//pause 
			}
			private function move_resume():void
			{
				move_up.resume();
				//start from the pause position 
			}
		]]>
	</mx:Script>
	<mx:Move id="move_up" target="{tt}"/>
	<mx:Canvas id="cs" width="100%" height="100%" left="0" top="0" verticalScrollPolicy="off" horizontalScrollPolicy="off" mouseOver="move_pause()" mouseOut="move_resume()">
		<mx:Text id="tt" left="3" top="1" horizontalCenter="0" verticalCenter="0">
		</mx:Text>
	</mx:Canvas>
</mx:Panel>

源:http://sensun.qz5z.com/flexMarquee/

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值