flex菜单,使用flex做的滑块儿菜单效果

使用flex做的滑块儿菜单效果,废话不多说,直接上图



代码如下:
mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="562" height="181" minWidth="550" minHeight="45" preloaderChromeColor="#118D6B" backgroundColor="#148087">
<fx:Style source="effect.css"/>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
<s:Move xTo="15" id="sy" target="bj"/>
<s:Move xTo="97" id="jj" target="bj"/>
<s:Move xTo="208" id="kc" target="bj"/>
<s:Move xTo="322" id="lx" target="bj"/>
<s:Move xTo="448" id="bm" target="bj"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
private function bmE():void{
bm.target = bj;
bm.play();
}
private function lxE():void{
lx.target = bj;
lx.play();
}
private function kcE():void{
kc.target = bj;
kc.play();
}
private function jjE():void{
jj.target = bj;
jj.play();
}
private function syE():void{
sy.target = bj;
sy.play();
}
]]>
</fx:Script>
<mx:Image x="15" y="10" source="../libs/images/2.gif" width="75" height="33" id="bj"/>
<s:Label x="27" y="13" text="首页" height="20" width="43" mouseOver="syE();" />
<s:Label x="97" y="13" text="学校简介" mouseOver="jjE();"/>
<s:Label x="208" y="13" text="课程设置" mouseOver="kcE();"/>
<s:Label x="322" y="13" text="联系我们" mouseOver="lxE();"/>
<s:Label x="448" y="13" text="立即报名" mouseOver="bmE();"/>
</s:Application>
css:
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
global
{
font-size: 18;
content-background-color: #991212;
symbol-color: #C65353;
color: #EEE7E7;
}
Tags:  flex菜单

延伸阅读

最新评论

发表评论