为相册中照片加上淡入淡出效果（AJAX）

为相册中照片加上淡入淡出效果（AJAX）

首次浏览相册中照片会以自动播放的形式展示照片，如果手动停止其自动播放功能，单击“下一张”或“上一张”按钮时照片会先以淡出效果出现，然后再以淡入方式出现。

ASP.NET AJAX Control Tookit提供了一套功能强悍的动画开发架构，此开发架构的名称就是动画集锦（AnimationExtender）。更重要的是只需通过简单的声明方式就能够制作出许多令人眼前一亮的视觉效果，例如可以设置当目标控件发生特定的事件（OnLoad、OnClick、OnMouseOver或OnMouseOut）时，就开始播放动画。

动画集锦控件AnimationExtender最大的优点在于允许使用XML声明语法来设置动画效果，，这样意味着不需要任何JavaScript脚本语言就能够制作出复杂的动画。动画集锦控件的基本语法如下：

<ajsxTookit:AnimationExtender ID="yourAE" runat="server" TargetControlID="目标控件的ID值" BehaviorID=”yourBehaviorID” ScriptPath=”yourScript.js”> <Animations> <OnClick> <!—在此处指定所要采用的动画，指定当控件被单击时，所要播放的动画> </OnClick> <OnHoverOut> <!—与OnMouseOut 类似，差异在于在开始播放动画之前，会先停止播放OnHoverOver 动画> </ OnHoverOut > <OnHoverOver> <!—与OnMouseOver 类似，差异在于在开始播放动画之前，会先停止OnMouseOut 动画> </ OnHoverOver > <OnLoadt> <!—在此处指定所要采用的动画，指定页面加载时，所要立即播放的动画> </ OnLoadt > < OnMouseOut > <!—在此处指定所要采用的动画，指定鼠标移出控件时，所要播放的动画> </ OnMouseOut > < OnMouseOver > <!—在此处指定所要采用的动画，鼠标移到控件上方时，所要播放的动画> </ OnMouseOver > </Animations> </ ajsxTookit:AnimationExtender>

（1）新建一个网站，将其命名为SlideSHow，默认主页为Default.aspx。

（2）在Default.aspx页面加载及单击“上一张”和“下一张”按钮时都需要播放动画，所以要在该页面中添加3个动画集锦扩展控件AnimationExtender，主要的HTML代码如下：

 

<asp:Image ID="imgShow" runat="server" ImageUrl="~/UpFile/1.JPG"/> <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="imgShow">//页面加载时 <Animations> <OnLoad> <Sequence> <FadeOut Duration="0" Fps="20" /> <FadeIn Duration="0" Fps="20" /> </Sequence> </OnLoad> </Animations> </cc1:AnimationExtender> asp:Button ID="btnPre" runat="server" SkinID="btnSkin" Text="上一张" Height="25px" Width="61px" /> <cc1:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="btnPre"> <Animations> <OnClick> <Sequence AnimationTarget="imgShow"> <FadeOut Duration="1" MinimumOpacity=".7" /> <FadeIn Duration=".3" FPS="20" /> </Sequence> </OnClick> </Animations> </cc1:AnimationExtender> <asp:Button ID="btnNext" runat="server" SkinID="btnSkin" Text="下一张" Height="25px" Width="60px" /> <cc1:AnimationExtender ID="AnimationExtender3" runat="server" TargetControlID="btnNext"> <Animations> <OnClick> <Sequence AnimationTarget="imgShow"> <FadeOut Duration="1" MinimumOpacity=".7" /> <FadeIn Duration=".3" FPS="20" /> </Sequence> </OnClick> </Animations> </cc1:AnimationExtender>