從清單中挑選一張動畫 (VB)

作者 ：一個是一個

下載 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 會在 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>

其中一個可能的三個動畫：面板會變得更寬 (按一下即可檢視全大小的影像)

上一個下一個