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

最新推荐文章于 2024-09-28 23:22:53 发布

pufan53

最新推荐文章于 2024-09-28 23:22:53 发布

阅读量140

点赞数

CC 4.0 BY-SA版权

文章标签： QQ Flex XML

本文链接：https://blog.youkuaiyun.com/pufan53/article/details/83921229

本文介绍了一个用于实现悬浮菜单自动隐藏及鼠标悬停时平滑展开的效果案例，并针对菜单面板闪烁的问题进行了优化。

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

想做一个悬浮菜单，自动隐藏到界面边缘，鼠标移上去时滑动展开。在网上找到一个代码，效果里面有点小小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>