`
tw5566
  • 浏览: 459115 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

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

阅读更多

最近做一个小项目需要用到这个效果,今天项目完成,将这个效果拿出与大家分享。原理其实就是使用一个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>

 

分享到:
评论

相关推荐

    Vue替代marquee标签超出宽度文字横向滚动效果

    为了在Vue项目中实现类似的效果,我们可以借助自定义组件或者第三方库来创建一个横向滚动的文字效果。下面将详细介绍如何使用Vue来替代`&lt;marquee&gt;`标签实现这一功能。 ### 1. 使用npm安装组件 首先,如果你想要...

    图片横向滚动效果 demo

    标题中的“图片横向滚动效果 demo”指的是一个网页设计或前端开发中的特定功能,它允许图片在水平方向上连续滚动,通常用于展示一组横向排列的图片,例如幻灯片、产品展示或照片墙等。这种效果可以增加网页的视觉...

    HarmonyOS应用开发-marquee组件使用

    在HarmonyOS的应用开发过程中,为了实现文本滚动的效果,我们可以使用`marquee`组件。此组件可以方便地帮助开发者实现动态展示文本的需求,适用于广告滚动、通知滚动等场景。 #### 创建项目 首先,我们需要在...

    用JavaScript和ASP制作连续滚动的字幕

    5. **多行滚动**:如果需要多行滚动,可以使用多个`&lt;p&gt;`标签或CSS的`display: flex`来实现。 总之,结合JavaScript和ASP,我们可以实现个性化、动态化的网页滚动字幕功能,为用户提供丰富的视觉体验。在实际项目中...

    微信小程序实现简单跑马灯效果

    在本文中,我们将深入探讨如何在微信小程序中实现简单的跑马灯效果。跑马灯效果是一种常见的文本滚动展示方式,通常用于电商应用中展示广告或滚动信息。在微信小程序中,我们可以通过结合WXML、WXSS以及JavaScript来...

    HTML5+CSS3+JavaScript 网页设计与制作期末综合大作业 G20五个页面(附完整答案和学生用要求及素材)

    此外,滚动效果可以通过JavaScript或者HTML5的新特性如`&lt;marquee&gt;`或`&lt;scroll&gt;`实现。 接下来,CSS3负责页面的视觉呈现。CSS3提供了丰富的选择器,如伪类和伪元素,使样式更加精确。对于“峰会介绍页面”的图文混排...

    微信小程序实现跑马灯效果

    在小程序中实现跑马灯效果,通常会涉及到定时器的使用,以及对页面元素位置的动态控制。在本例中,通过调整文字元素的left属性值,实现文字的左右滚动效果。 本篇教程中,跑马灯效果的实现涉及到了以下知识点: 1....

    网页设计HTML+CSS语法.pdf

    2. **滚动效果**:`&lt;marquee&gt;`标签可以创建滚动效果,如`&lt;marquee behavior=scroll&gt;`实现预设卷动,`&lt;marquee direction&gt;`控制滚动方向,`&lt;marquee loop&gt;`设置滚动次数,`&lt;marquee width&gt;`和`&lt;marquee height&gt;`设定...

    css.zip_The Web

    在"css.zip_The Web"这个压缩包中,我们很显然会探讨如何利用CSS来创建一个具有滚动动画和跑马灯效果的销售网站。 首先,我们需要理解CSS的基本结构。CSS由选择器和声明组成,声明则包含属性和值。例如: ```css ...

    微信小程序实现简单文字跑马灯

    在微信小程序中实现简单的文字跑马灯效果,可以利用`scroll-view`组件配合CSS样式以及JavaScript数据绑定来完成。下面将详细介绍如何实现这一功能。 首先,我们来看一下关键的WXML(微信小程序的结构层)代码: ``...

    HTML5 CSS3 JavaScriptWeb前端开发自测试卷2.docx

    3. 动态滚动文字:`&lt;marquee&gt;`标签在HTML中用于创建动态滚动效果的文字。 【CSS3知识点】 4. 列表标签:`&lt;ul&gt;`是无序列表标签,`&lt;ol&gt;`是有序列表标签,它们都是块级元素。`&lt;dl&gt;`是定义列表标签,列表标签还包括...

    HTML5 CSS3 JavaScriptWeb前端开发自测试卷2.pdf

    3. 动态滚动文字:`&lt;marquee&gt;`标签用于创建动态滚动效果的文字(选项A)。 4. HTML表单元素:`&lt;input&gt;`标签的`type="password"`创建密码框(选项A),一组单选按钮的`name`属性值应该一致(选项B),`...

Global site tag (gtag.js) - Google Analytics