想做一个悬浮菜单,自动隐藏到界面边缘,鼠标移上去时滑动展开。在网上找到一个代码,效果里面有点小小bug:鼠标移到面板位置不动时,面板会一直闪烁。我对代码进行了一点优化,现在可以正常的展现:
- <!-- 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>
<?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>