zoukankan      html  css  js  c++  java
  • AnimationExtender控件

    功能:
            用来美化、装饰网站等。
    属性:
             OnLoad:表示要触发的事件是加载页面时。 
             OnClick:表示要触发的事件是单击控件时。 
             OnMouseOver:表示要触发的事件是鼠标滑过时。 
             OnMouseOut:表示要触发的事件是鼠标移走时 
             OnHoverOver:与OnMouseOver类似,对特定控件而言。 
             OnHoverOut:与OnMouseOut类似,对特定控件而言。 
     

    1.变色颜色的动画效果
            本例要实现的是当鼠标滑过Panel时,Panel的颜色发生变化,当鼠标移走时,Panel的颜色又发生了变化,这需要“Color Animation”。Color Animation动画的属性主要有4个:
         Duration:动画显示效果的时间间隔。
         PropertyKey:要设置的属性值。
         StartValue:属性的开始值。
         EndValue:属性的结束值。

    2.淡入淡出合并的动画效果
        淡入淡出效果是网站中经常看到的效果,本例使用“Fade Animation”来实现这样的效果,“Fade Animation”的属性主要有4个:
         duration:动画效果的时间间隔。
         Fps:帧/秒的显示速度。
         maximumOpacity:最大透明度。
         minimumOpacity:最小透明度。 

    3.淡入和淡出分开的动画效果
        上一个实例中,当鼠标滑过时,其实是完成两步:淡入和淡出。通常在实际应用中,淡入和淡出是分开的。本例要演示的是当鼠标滑过时,实现淡入效果,当鼠标移出时,实现淡出效果。
        此功能需要使用“FadeIn Animation”和“FadeOut Animation”,其中两个动画控件有着相同的属性,属性内容如下:
         duration:动画效果的时间间隔。
         Fps:帧/秒的显示速度。
         maximumOpacity:最大透明度。
        minimumOpacity:最小透明度。 

    4.可伸缩的动画效果
        本例要实现的效果是,当单击Panel时,变化Panel的高度和宽度。这需要使用“Resize Animation”动画控件。其属性主要有5个:
          duration:动画效果的时间间隔。
         Fps:帧/秒的显示速度。
        width:变化后的宽度。
         height:变化后的高度。
        unit:高度和宽度的单位,通常为“px”。

    代码实例:

    <body onload="focus();">
      
    <div class="banner">
        
    <href="http://abcdwxc.cnblogs.com/" target="_blank"> AnimationExtender控件的使用------王晓成的博客
        
    </a>
      
    </div>
      
    <div class="description">
        请单击,移到上面,及移出
    <strong>“请按下我!”</strong>,来看看它会有什么样的变化。
      
    </div>
      
    </>
      
    <form id="form1" runat="server">
        
    <div>
          
    <asp:ScriptManager ID="ScriptManager1" runat="server">
          
    </asp:ScriptManager>
          
    <ajaxToolkit:AnimationExtender ID="AE"
                                         runat
    ="server"
                                         TargetControlID
    ="myPanel">
            
    <Animations>
                
    <OnClick>
                  
    <FadeOut Duration="2" Fps="10" />
                
    </OnClick>
                
    <OnMouseOver>
                
    <Color Duration=".2" PropertyKey="color" StartValue="#FFFFFF" EndValue="#FF0000" />
                
    </OnMouseOver>
                
    <OnMouseOut>
                    
    <Color Duration=".2"  PropertyKey="color" StartValue="#000000" EndValue="#FFFFFF" />
                
    </OnMouseOut>
            
    </Animations>
          
    </ajaxToolkit:AnimationExtender>
        
    </div>
        
    <div align="center">
          
    <asp:Panel ID="myPanel" runat="server" style="cursor:pointer;">
            请按下我!
          
    </asp:Panel>
        
    </div>
      
    </form>
    </body>

    博客园大道至简

    http://www.cnblogs.com/jams742003/

    转载请注明:博客园

  • 相关阅读:
    记一次失败的发布经历
    使用Test Director 编写测试用例的一点经验
    Windows Embedded 7 Standard 裁剪过程图解教程
    人生中第一次刮餐饮发票中奖5块!
    Proj EULibHarn Paper Reading: IntelliGen: Automatic Driver Synthesis for FuzzTesting
    Proj EULibHarn Paper Reading: FuzzGen: Automatic Fuzzer Generation
    Proj THUDBFuzz Paper Reading: Lenient Execution of C on a Java Virtual Machine
    Proj AutoWriter Paper Reading: Abstract Syntax Networks for Code Generation and Semantic Parsing
    Proj THUDBFuzz Paper Reading: ContextAware FailureOblivious Computing as a Means of Preventing Buffer Overflows
    Proj EULibHarn Paper Reading: FUDGE: Fuzz Driver Generation at Scale
  • 原文地址:https://www.cnblogs.com/jams742003/p/1451333.html
Copyright © 2011-2022 走看看