注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Flex 技术博客

醉里挑灯看剑,梦回吹角连营

 
 
 

日志

 
 

滚动文字新闻[转载]  

2008-07-23 11:09:58|  分类: Flex 应用 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

从一个论坛上看到的,实现一个滚动新闻条,类似与跑马灯效果,转过来供需要的人参考。
其实就是不断的对文字进行移动,也可以用Text的move函数来实现,具体效果可能差不多。

在线演示

代码如下 

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">

    <mx:Script>

            <![CDATA[

                import flash.utils.clearInterval;

                import flash.utils.setInterval;

 

                private var toLeftInterval:uint;

                private var toUpInterval:uint;

               

                private var txt1Width:int = 200;

                private var txt2Height:int = 200;

               

                private function init():void {

                        toLeftInterval = setInterval(rollToLeft,100);

                        toUpInterval = setInterval(rollToUp,100);

                }

               

                // 从右向左滚动

                private function rollToLeft():void {

                    var len:int = txt1.text.length * 12;// 这里的12fontSize

                    if(len<txt1Width) len = txt1Width;

                    var textX:int = txt1.x;

                    if(textX>-len){

                        txt1.x = textX-10;

                    }else{

                            txt1.x = txt1Width;

                    }

                }

               

                // 从左向右滚动

                private function rollToUp():void {

                    var len:int = txt2.text.length * 12;// 这里的12fontSize

                    len= (Math.round(len/txt2Height)+1)*20;

                    var textY:int = txt2.y;

                    if(textY>-len){

                        txt2.y = textY-10;

                    }else{

                            txt2.y = txt2Height;

                    }

                }

               

                // 暂停滚动

                private function pause(event:MouseEvent):void {

                    var text:Text = event.currentTarget as Text;

                    if(text.id == 'txt1')        clearInterval(toLeftInterval);

                    if(text.id == 'txt2')        clearInterval(toUpInterval);

                }

               

            // 恢复滚动

                private function resume(event:MouseEvent):void {

                    var text:Text = event.currentTarget as Text;

                    if(text.id == 'txt1')        toLeftInterval = setInterval(rollToLeft,100);

                    if(text.id == 'txt2')  toUpInterval = setInterval(rollToUp,100);

                }

            ]]>

    </mx:Script>

 

    <mx:ApplicationControlBar width="80%" horizontalAlign="center" horizontalCenter="0" verticalCenter="0">

        <mx:Canvas width="{txt1Width}" horizontalScrollPolicy="off">

                <mx:Text id="txt1" text="文字从右向左滚动,鼠标放上则停止滚动,鼠标离开继续" fontSize="12"

                        mouseOver="pause(event)" mouseOut="resume(event)" x="{txt1Width}"/>

        </mx:Canvas>

        <mx:Spacer width="100" />

        <mx:Canvas width="100" verticalScrollPolicy="off" height="{txt2Height}">

                <mx:Text id="txt2" text="文字从下向上滚动,鼠标放上则停止滚动,鼠标离开继续" fontSize="12"

                        mouseOver="pause(event)" mouseOut="resume(event)" y="{txt2Height}" width="100%"/>

        </mx:Canvas>               

    </mx:ApplicationControlBar>

</mx:Application>

 

  评论这张
 
阅读(778)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017