AnimationExtender控件

简介: 功能:         用来美化、装饰网站等。 属性:          OnLoad:表示要触发的事件是加载页面时。           OnClick:表示要触发的事件是单击控件时。           OnMouseOver:表示要触发的事件是鼠标滑过时。
功能:
        用来美化、装饰网站等。
属性:
         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/

转载请注明:博客园

目录
相关文章
|
11天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1237 5
|
10天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1217 87
|
11天前
|
云栖大会
阿里云云栖大会2025年9月24日开启,免费申请大会门票,速度领取~
2025云栖大会将于9月24-26日举行,官网免费预约畅享票,审核后短信通知,持证件入场
1798 13
|
20天前
|
人工智能 运维 安全
|
3天前
|
资源调度
除了nrm-pm,还有哪些工具可以管理多个包管理器的源?
除了nrm-pm,还有哪些工具可以管理多个包管理器的源?
235 127
|
4天前
|
前端开发
Promise的then方法返回的新Promise对象有什么特点?
Promise的then方法返回的新Promise对象有什么特点?
177 2