选取列表中的一个动画 (C#)
ASP.NET AJAX 控件工具包中的动画控件不仅是一个控件,而且是用于向控件添加动画的整个框架。 该框架还允许程序员从动画列表中选取一个动画,具体取决于某些 JavaScript 代码的评估。
概述
ASP.NET AJAX 控件工具包中的动画控件不仅是一个控件,而且是用于向控件添加动画的整个框架。 该框架还允许程序员从动画列表中选取一个动画,具体取决于某些 JavaScript 代码的评估。
步骤
首先,在页面中包括 ScriptManager
;然后加载 ASP.NET AJAX 库,从而可以使用 Control Toolkit:
<asp:ScriptManager ID="asm" runat="server" />
动画将应用于如下所示的文本面板:
<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
</asp:Panel>
在面板的关联 CSS 类中,定义漂亮的背景色,并为面板设置固定宽度:
<style type="text/css">
.panelClass {background-color: lime; width: 300px;}
</style>
然后,将 添加到 AnimationExtender
页面,提供 ID
、 TargetControlID
属性和强制 runat="server":
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
在 节点中 <Animations>
,使用 <OnLoad>
在页面完全加载后运行动画。 元素将发挥作用, <Case>
而不是常规动画之一。 计算其 SelectScript 属性的值;返回值必须为数字。 根据此数字,将执行 Case> 中的<一个子动画。 例如,如果 SelectScript 的计算结果为 2,则 Control Toolkit 在 <Case> (计数从 0 开始) 运行第三个动画。
以下标记定义了三个子动画:调整宽度大小、调整高度大小和淡出。JavaScript 代码 (Math.floor(3 * Math.random())
) 然后选取一个介于 0 和 2 之间的数字,以便运行三个动画中的一个:
<ajaxToolkit:AnimationExtender ID="ae" runat="server"
TargetControlID="Panel1">
<Animations>
<OnLoad>
<Case SelectScript="Math.floor(3 * Math.random())">
<Resize Width="1000" Unit="px" />
<Resize Height="150" Unit="px" />
<FadeOut Duration="1.5" Fps="24" />
</Case>
</OnLoad>
</Animations>
</ajaxToolkit:AnimationExtender>
可能的三个动画之一:面板变宽 (单击以查看全尺寸图像)