返回首页

AnimationExtender控件使用基础教程

时间:2011-04-12 21:22来源:知行网www.zhixing123.cn 编辑:麦田守望者

功能:
用来美化、装饰网站等。
属性:
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">
<a href="http://abcdwxc.cnblogs.com/" rel="nofollow" target="_blank"> AnimationExtender控件的使用------王晓成的博客
</a>
</div>
<div class="description">
请单击,移到上面,及移出<strong>“请按下我!”</strong>,来看看它会有什么样的变化。
</div>
<p />
<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>

 

------分隔线----------------------------
标签(Tag):ASP.NET asp.Net龙8国际平台入口 asp.net源代码 asp.net基础教程
------分隔线----------------------------
推荐内容
  • SQL Server 2008 sa登录报18456错误的解决方法

    许多人用SQL Server用的时间长了会自动报18456错误,SQL Server 18456错误应该说很好...

  • Windows 2003 IIS如何启用Gzip压缩的方法

    经常看到网上有人提问说:开GZIP压缩有什么好处?Gzip开启以后会将输出到用户浏览器的...

  • IIS自定义404错误页面提示系统找不到指定的文件问题

    我们在IIS站点属性里面设置了自定义的404错误页面为一个文件之后,不知道为什么一直不...

  • 支持IPv4与IPv6双协议栈的Web服务器设计实践教程

    嵌入式Web技术因其跨平台的特点得到了广泛的应用[1]。用户只需要登录浏览器即可实现对...

  • SQL查询中回表对性能的影响

    运营反馈某个功能速度很慢,查了一下,定位到如下 SQL: select id from user where n...

  • 高校数据安全全过程管理实践教程

    《网络安全法》出台后,以法律的形式明确要求各类组织切实承担起保障数据安全的责任,...

  • 猜你感兴趣
  • 教育技术学动态
  • 教育技术学论文
  • 理论研究
  • 应用研究
  • 资源收藏
  • 百家观点
  • 英文文献
  • 中国电化教育
  • 电化教育研究
  • 中国远程教育
  • 开放教育研究
  • 现代教育技术
  • 远程教育杂志
  • 现代远距离教育
  • 中国教育信息化
  • 中国信息技术教育
  • 中小学信息技术
  • Flash龙8国际平台入口
  • Photoshop龙8国际平台入口
  • 3DMAX龙8国际平台入口
  • AutoCAD龙8国际平台入口
  • CorelDRAW龙8国际平台入口
  • Matlab龙8国际平台入口
  • 其他龙8国际平台入口
  • .Net龙8国际平台入口
  • Asp龙8国际平台入口
  • Php龙8国际平台入口
  • Jsp龙8国际平台入口
  • Ajax龙8国际平台入口
  • Android教程
  • 其他龙8国际平台入口
  • Word教程
  • Excel教程
  • PowerPoint教程
  • Ubuntu教程
  • 其他教程
  • 课件下载
  • 软件下载
  • 视频教程下载
  • 其他下载
  • 教案大全
  • 试题大全
  • 课件大全
  • 其他大全
  • 人像摄影
  • 风光摄影