选取列表中的一个动画 (VB)

  • 项目

作者 ：Christian Wenz

下载 PDF

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 在 <事例> (计数从 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>

可能的三个动画之一：面板变宽

可能的三个动画之一：面板变宽 (单击以查看全尺寸图像)

上一页下一页