`
pufan53
  • 浏览: 44105 次
  • 性别: Icon_minigender_2
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

Flex滑动面板,类似QQ隐藏效果

阅读更多
    想做一个悬浮菜单,自动隐藏到界面边缘,鼠标移上去时滑动展开。在网上找到一个代码,效果里面有点小小bug:鼠标移到面板位置不动时,面板会一直闪烁。我对代码进行了一点优化,现在可以正常的展现:
<?xml version="1.0"?>
<!-- Simple example to demonstrate the Move effect. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
			
            private function init():void{
                //初始默认将百分之九十的图片隐藏起来。通过y轴的福坐标来设置
                img.y=0-(img.height*0.90
            }			
            //当鼠标覆盖的时候 将图片显示出来
            private function moveMOverImage():void {
                /////////////优化///////////
                if(myMove.isPlaying)
                myMove.stop();
                ///////////////////////////
                myMove.yTo=0; 
                myMove.play();
            }
            
            //鼠标移开的时候在将图片重新隐藏
            private function moveMOutImage():void {
                /////////////优化///////////
                if(myMove.isPlaying)
                myMove.stop();
                ///////////////////////////
                myMove.yTo=0-(img.height*0.90); 
                myMove.play();
            }
            
            
      ]]>
    </mx:Script>

    <mx:Move id="myMove" target="{img}"  />

    <mx:Panel title="Move Effect Example" width="95%" height="95%" 
        paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5">

        <mx:Canvas id="canvas" width="100%" height="100%" >

            <mx:Image id="img" source="@Embed(source='beijing.png')"   mouseOver="moveMOverImage();" mouseOut="moveMOutImage();" />

        </mx:Canvas>
    
    </mx:Panel>
</mx:Application>
分享到:
评论
1 楼 hyx0914 2011-11-25  
学习中,谢谢了~!

相关推荐

    flex 滑动隐藏效果

    本文将深入探讨如何使用Flex布局实现滑动隐藏效果,这在移动应用和网页设计中非常常见,特别是在导航菜单、侧边栏或者卡片式内容展示等方面。 首先,让我们了解Flex布局的基础。Flex布局是CSS3引入的一种新的布局...

    flex 滑动隐藏.滑动出现的效果

    "flex 滑动隐藏.滑动出现的效果"是利用Flex布局来实现的一种交互式用户体验,常用于侧边栏、导航菜单或者好友列表等场景。下面将详细解释如何通过Flex布局实现这一效果,并探讨其在实际应用中的改进方法。 首先,...

    flex实现滑动显示隐藏效果

    标题中的"flex实现滑动显示隐藏效果"指的是使用Flex框架来创建一个可以滑动展示或隐藏内容的组件。这个功能在移动应用和网页设计中非常常见,比如侧边栏菜单、抽屉式导航或者可展开的详情区域。 首先,我们需要理解...

    flex实现QQ面板效果

    flex实现QQ面板效果flex实现QQ面板效果flex实现QQ面板效果flex实现QQ面板效果

    slide 左右滑动面板

    这可能包括`display: flex`或者`position: absolute/fixed`来定位面板,以及设置适当的宽度和溢出属性来控制面板的显示和隐藏。在本例中,我们可能会使用一个容器元素来包裹所有的面板,以便它们可以左右滑动。 2. ...

    FLex 左右滑动图片墙

    在本文中,我们将深入探讨如何使用Adobe Flex技术创建一个具有左右滑动功能的图片墙。Flex是一种基于ActionScript 3(AS3)的开源框架,主要用于构建富互联网应用程序(RIA)。通过利用Flex,开发者可以轻松地创建...

    Flex4 滑动菜单案例

    Flex4是一种基于ActionScript 3.0的框架,用于构建富互联网...通过深入理解这个案例,开发者不仅能掌握滑动菜单的实现,还能进一步了解Flex4的组件模型、事件处理和动画效果,为开发更复杂的RIA应用打下坚实的基础。

    Flex开发的类似3d屏风展示效果,供参考学习用

    这个标题提到的"Flex开发的类似3d屏风展示效果",指的是使用Flex技术实现的一个具有三维视觉效果的屏幕展示组件,它模拟了中国古代屏风的翻转效果,用于展示图片或其他内容,提供了一种独特且吸引用户的交互体验。...

    Flex中类似QQ新闻提示的控件

    Flex中类似QQ新闻提示的控件 Flex中类似QQ新闻提示的控件 Flex中类似QQ新闻提示的控件 Flex中类似QQ新闻提示的控件 Flex中类似QQ新闻提示的控件 Flex中类似QQ新闻提示的控件

    转载类似iphono的加速度滑动效果的Flex容器

    标题提到的“转载类似iPhone的加速度滑动效果的Flex容器”是一个关于如何利用Flex布局实现类似iPhone滚动时的加速度效果的技术分享。这种效果使得滚动更加流畅,增强用户的操作体验。下面将详细介绍这个知识点及其...

    flex翻书效果 flex翻书效果

    Flex翻书效果是一种在网页或应用中实现模拟真实书籍翻页动画的技术,它利用了CSS3中的Flexbox布局模型和一些动态效果来创造出逼真的翻页体验。在现代Web开发中,这种效果常用于电子书、杂志或者产品展示等场景,以...

    flex仿qq右边弹出提示消息功能

    通过查看和学习这些文件,你可以深入了解如何在Flex中实现类似QQ的弹出消息功能,包括Flex组件的使用、动画效果的实现以及事件处理机制。通过实践和修改代码,你将能更好地掌握Flex开发技巧,并能够适应不同的项目...

    Flex超炫 悬浮面板

    本篇文章将深入探讨“Flex超炫悬浮面板”这一主题,以及如何通过ActionScript实现这样的功能。 首先,让我们理解什么是悬浮面板。在用户界面设计中,悬浮面板(Floating Panel)是指一种可以自由移动、调整大小,并...

    flex 图片轮播效果

    在IT行业中,图片轮播效果是一种常见的网页设计元素,它能够以吸引人的动态方式展示一组图片,提升用户体验。"flex 图片轮播效果"是指利用...虽然没有提供源码,但了解以上知识点,可以帮助我们理解和复现类似的效果。

    flex 仿qq.

    flex 仿qq

    Flex实现手机滑动锁

    在本场景中,"Flex实现手机滑动锁"是指利用Flex技术开发一款模拟手机上常见的滑动解锁功能的应用。这种功能允许用户通过在屏幕上滑动特定的图形路径来解锁设备或应用。 首先,我们要理解Flex的架构。Flex使用MXML和...

    Flex开门,关门,翻转,效果

    TransitionManager提供了一系列预定义的过渡效果,如滑动、淡入淡出等,可以方便地应用于组件的显示和隐藏。此外,开发者也可以自定义动画,通过改变组件的宽度、高度、透明度等属性来模拟门的开启和关闭动作。 ...

    Flex翻书特效 OpenBook

    Flex翻书特效是一种在Web应用中模拟真实书籍翻页效果的技术,主要应用于电子图书、杂志或画册等在线阅读场景,能提供用户更加沉浸式的阅读体验。本文将深入探讨Flex翻书特效的相关知识点,包括Flex的基本概念、实现...

    flex特殊效果实例

    5. **特殊效果**:合集中的实例可能涵盖各种特殊效果,如淡入淡出、滑动、旋转、缩放等。通过研究这些例子,开发者可以学习如何使用Flex和AS实现视觉上的动态效果,提升用户体验。 6. **学习资源**:对于初学者或有...

Global site tag (gtag.js) - Google Analytics