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
   
   >