AjaxControlToolkit学习系列(3) AnimationExtender

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

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

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

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

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Animation.aspx.cs" Inherits="Animation" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
</head>
<body>

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

    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="sm" runat="server">
        </asp:ScriptManager>
        <cc1:AnimationExtender TargetControlID="panel" ID="AnimationExtender1" runat="server">
            <Animations>
                                        <OnLoad> 
                                        <Sequence> 
                                        <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>
                                        </cc1:AnimationExtender>
                                        <div align="left">
                                            <asp:Panel ID="panel" runat="server" Style="cursor: pointer;" CssClass="panel">
                                                Click
                                            </asp:Panel>
        </div>
    </div>
    </form>
</body>
</html>