sagittar
Flex滑动面板，类似QQ隐藏效果 .
想做一个悬浮菜单，自动隐藏到界面边缘，鼠标移上去时滑动展开。在网上找到一个代码，效果里面有点小小bug：鼠标移到面板位置不动时，面板会一直闪烁。我对代码进行了一点优化，现在可以正常的展现：
<?xml version="1.0"?>   
  1. <!-- Simple example to demonstrate the Move effect. -->   
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">   
  3.   
  4.     <mx:Script>   
  5.         <![CDATA[   
  6.             import mx.controls.Alert;   
  7.                
  8.             private function init():void{   
  9.                 //初始默认将百分之九十的图片隐藏起来。通过y轴的福坐标来设置   
  10.                 img.y=0-(img.height*0.90  
  11.             }              
  12.             //当鼠标覆盖的时候 将图片显示出来   
  13.             private function moveMOverImage():void {   
  14.                 /////////////优化///////////   
  15.                 if(myMove.isPlaying)   
  16.                 myMove.stop();   
  17.                 ///////////////////////////   
  18.                 myMove.yTo=0;    
  19.                 myMove.play();   
  20.             }   
  21.                
  22.             //鼠标移开的时候在将图片重新隐藏   
  23.             private function moveMOutImage():void {   
  24.                 /////////////优化///////////   
  25.                 if(myMove.isPlaying)   
  26.                 myMove.stop();   
  27.                 ///////////////////////////   
  28.                 myMove.yTo=0-(img.height*0.90);    
  29.                 myMove.play();   
  30.             }   
  31.                
  32.                
  33.       ]]>   
  34.     </mx:Script>   
  35.   
  36.     <mx:Move id="myMove" target="{img}"  />   
  37.   
  38.     <mx:Panel title="Move Effect Example" width="95%" height="95%"    
  39.         paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5">   
  40.   
  41.         <mx:Canvas id="canvas" width="100%" height="100%" >   
  42.   
  43.             <mx:Image id="img" source="@Embed(source='beijing.png')"   mouseOver="moveMOverImage();" mouseOut="moveMOutImage();" />   
  44.   
  45.         </mx:Canvas>   
  46.        
  47.     </mx:Panel>   
  48. </mx:Application>  
[java] view plaincopyprint?
  1. <?xml version="1.0"?>  
  2. <!-- Simple example to demonstrate the Move effect. -->  
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">  
  4.   
  5.     <mx:Script>  
  6.         <![CDATA[  
  7.             import mx.controls.Alert;  
  8.               
  9.             private function init():void{  
  10.                 //初始默认将百分之九十的图片隐藏起来。通过y轴的福坐标来设置   
  11.                 img.y=0-(img.height*0.90  
  12.             }             
  13.             //当鼠标覆盖的时候 将图片显示出来   
  14.             private function moveMOverImage():void {  
  15.                 /////////////优化///////////   
  16.                 if(myMove.isPlaying)  
  17.                 myMove.stop();  
  18.                 ///////////////////////////   
  19.                 myMove.yTo=0;   
  20.                 myMove.play();  
  21.             }  
  22.               
  23.             //鼠标移开的时候在将图片重新隐藏   
  24.             private function moveMOutImage():void {  
  25.                 /////////////优化///////////   
  26.                 if(myMove.isPlaying)  
  27.                 myMove.stop();  
  28.                 ///////////////////////////   
  29.                 myMove.yTo=0-(img.height*0.90);   
  30.                 myMove.play();  
  31.             }  
  32.               
  33.               
  34.       ]]>  
  35.     </mx:Script>  
  36.   
  37.     <mx:Move id="myMove" target="{img}"  />  
  38.   
  39.     <mx:Panel title="Move Effect Example" width="95%" height="95%"   
  40.         paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5">  
  41.   
  42.         <mx:Canvas id="canvas" width="100%" height="100%" >  
  43.   
  44.             <mx:Image id="img" source="@Embed(source='beijing.png')"   mouseOver="moveMOverImage();" mouseOut="moveMOutImage();" />  
  45.   
  46.         </mx:Canvas>  
  47.       
  48.     </mx:Panel>  
  49. </mx:Application>  
<?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>
posted on 2012-10-30 09:39  sagittar  阅读(104)  评论(0)    收藏  举报

博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3 Powered By博客园