Ajax Toolkit 控件——AnimationExtender

• AnimationExtender 这个控件呢，大概就是能给一个Panel等添加一些鼠标事件。点击事件等等。

 

• 还是看例子先。

　　开始加载，会有一个OnLoad响应，

　　加载之后，变成正常状态。其中鼠标移入和移出，都会有mouse的OVer和out变化。这里就不一一显示了。

　　点击之后，出现放大。触发了OnClick事件。

　　几个属性说明：
         OnLoad：表示要触发的事件是加载页面时。 
         OnClick：表示要触发的事件是单击控件时。 
         OnMouseOver：表示要触发的事件是鼠标滑过时。 
         OnMouseOut：表示要触发的事件是鼠标移走时 
         OnHoverOver：与OnMouseOver类似，对特定控件而言。 
         OnHoverOut：与OnMouseOut类似，对特定控件而言。

　　这个例子中所以涉及的参数简单说明：

•  Duration：动画显示效果的时间间隔。
•  PropertyKey：要设置的属性值。
• StartValue：属性的开始值。
• EndValue：属性的结束值。
• Fps：帧/秒的显示速度。
• maximumOpacity：最大透明度。
• minimumOpacity：最小透明度。  
• unit：高度和宽度的单位，通常为“px”。　
• ScriptAction 可以用脚本控制。

Code
<div>
<asp:ScriptManagerID="sm"runat="server">
</asp:ScriptManager>
<asp:UpdatePanelID="updatePanel1"runat="server">
<ContentTemplate>
<ajax:AnimationExtenderID="ae"runat="server"TargetControlID="panel">
<Animations>
<OnLoad>
<Sequence>
<ScriptActionScript="InitialLoad();"/>
<FadeIn  Fps="30"AnimationTarget="panel"/>
</Sequence>
</OnLoad>
<OnClick>
<Sequence>
<Pulse Duration="0.1"/>
<Parallel Duration=".5"Fps="50">
<FadeOut/>
<Scale ScaleFactor="5"Unit="px"Center="true"ScaleFont="true"FontUnit="pt"/>
</Parallel>
<Parallel Duration=".5"Fps="50">
<FadeIn/>
<Scale ScaleFactor="0.2"Unit="px"Center="true"ScaleFont="True"FontUnit="pt"/>
</Parallel>
</Sequence>
</OnClick>
<OnMouseOver>
<Color Duration=".2"PropertyKey="color"StartValue="#FFFFFF"EndValue="#FF0000"/>
</OnMouseOver>
<OnMouseOut>
<Color Duration=".2"PropertyKey="color"StartValue="#000000"EndValue="#FFFFFF"/>
</OnMouseOut>
</Animations>
</ajax:AnimationExtender>
<div align="left">
<asp:Panel ID="panel"runat="server"Style="cursor: pointer;"CssClass="panel">
Click
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>

　　Load的JS参考：

　　

Code
<script. type="text/javascript"language="javascript">
functionInitialLoad()
{
varp=document.getElementById("panel");
p.style.opacity="0";
p.style.display="block";
}
</script>