flex中实现marquee效果(由下而上滚动)

本文介绍了一种使用Text控件和Move效果实现文字滚动的技术方案。通过在creationComplete事件中设置Move参数,确保文字平滑滚动且能无限循环播放。同时,用户鼠标悬停时滚动暂停,离开时继续。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近做一个小项目需要用到这个效果,今天项目完成,将这个效果拿出与大家分享。原理其实就是使用一个Text(或者TextArea)控件,然后添加一个Move效果,使Text控件向上移动。其中关键的一点是:在creationComplete事件中获取控件高度,否则会出现高度误差偏大。源代码如下:

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
    creationComplete
="complete()">
    
<mx:Script>
        
<![CDATA[
            private function complete():void
            {
                move_up.yFrom = cs.height - 6;    //"加6减6是为了首尾连接更加自然"
                move_up.yTo = 0 - tt.height + 6;  //同上
                move_up.repeatCount = 0; //无限次重复
                move_up.repeatDelay = 0; //重复时间,毫秒
                move_up.duration = 6000; //滚动一次的时间,毫秒
                move_up.play();
            }
            
            private function move_pause():void
            {
                move_up.pause();  //暂停
            }
            
            private function move_resume():void
            {
                move_up.resume(); //从暂停位置开始
            }
        
]]>
    
</mx:Script>
    
<mx:Move id="move_up" target="{tt}" />
    
<mx:Panel width="250" height="200" layout="absolute" title="公告栏" 
        fontSize
="13" horizontalCenter="0" verticalCenter="0">
        
<mx:Canvas id="cs" width="100%" height="100%" left="0" top="0" 
            verticalScrollPolicy
="off" mouseOver="move_pause()" mouseOut="move_resume()">
            
<mx:Text id="tt" width="94%" horizontalCenter="0"
                text
="表面上看,文字由下向上滚动,其实是Text控件在滚动。" verticalCenter="0">
            
</mx:Text>
        
</mx:Canvas>
    
</mx:Panel>
</mx:Application>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值