//首先建立一个Button ID 为btninfo, 再建立一个 div id="flyout" 再建立一个div id="info"这里是显示详细信息 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>AJAX控件之Animation</title> <script type="text/javascript"> function Cover(bottom,top) { var location = Sys.UI.DomElement.getLocation(bottom); top.style.position = 'absolute'; top.style.top=location.y+'px'; top.style.left=location.x+'px'; top.style.height=bottom.offsetHeight+'px'; top.style.width=bottom.offsetWidth+'px'; } </script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <asp:Button ID="btnInfo" runat="server" Text="看我炫不炫" Width="121px" OnClientClick="return false" style="left: 350px; position: absolute; top: 255px" /><br /> </div> <div id="flyout" style ="display:none; width:250px; z-index:2; background-color:#FFFFFF; border:solid 1px #D0D0D0;"></div> <div id="info" style="border-right: #3300cc 1px solid; border-top: #3300cc 1px solid; border-left: #3300cc 1px solid; width: 166px; border-bottom: #3300cc 1px solid; height: 187px; background-color: #ffffcc; text-align: center; filter: progid:dximagetransform.microsoft.alpha(opacity=50); display: none;"> <div id="btnCloseParent" style="float: right; width: 23px; height: 23px; font-weight: bold; color: silver; background-color: #ffffff; filter: progid:dximagetransform.microsoft.alpha(opacity=50);"> <asp:LinkButton ID="btnClose" runat="server" OnClientClick="return false">关闭</asp:LinkButton></div> <br /> 网上在线调查<br /> <br /> <asp:LinkButton ID="lnkQuestion" runat="server" OnClientClick="return false">问题</asp:LinkButton>、<asp:LinkButton ID="lnkAnswer" runat="server" OnClientClick="return false">多选项</asp:LinkButton><br /> <br /> div> <cc1:AnimationExtender ID="openAnimation" runat="server" TargetControlID="btnInfo"> <Animations> <OnClick> <Sequence> <EnableAction Enabled="false" /> <ScriptAction Script="Cover($get('btnInfo'),$get('flyout'));" /> <StyleAction AnimationTarget="flyout" Attribute="display" Value="block" /> <Parallel AnimationTarget="flyout" Duration=".3" Fps="25"> <Move Horizontal="166" Vertical="-50" /> <Resize Width="166" Height="183" /> <Color PropertyKey="backgroundColor" StartValue="#AAAAAA" EndValue="#FFFFFF" /> </Parallel> <ScriptAction Script="Cover($get('flyout'),$get('info'));" /> <StyleAction AnimationTarget="info" Attribute="display" Value="block" /> <FadeIn AnimationTarget="info" Duration=".3" /> <StyleAction AnimationTarget="flyout" Attribute="display" Value="none" /> <Parallel AnimationTarget="info" Duration=".5"> <Color PropertyKey="color" StartValue="#666666" EndValue="#FF0000" /> <Color PropertyKey="borderColor" StartValue="#666666" EndValue="#FF0000" /> </Parallel> <Parallel AnimationTarget="info" Duration=".5"> <Color PropertyKey="color" StartValue="#FF0000" EndValue="#666666" /> <Color PropertyKey="borderColor" StartValue="#FF0000" EndValue="#666666" /> <FadeIn AnimationTarget="btnCloseParent" MaxinumOpacity=".5" /> </Parallel> </Sequence> </OnClick> </Animations> </cc1:AnimationExtender> <cc1:AnimationExtender ID="closeAnimation" runat="server" TargetControlID="btnClose"> <Animations> <OnClick> <Sequence> <FadeOut AnimationTarget="info" /> <EnableAction Animationtarget="btnInfo" Enabled="true" /> </Sequence> </OnClick> <OnMouseOver> <Color Duration=".2" PropertyKey="color" StartValue="#FFFFFF" EndValue="#FF0000" /> </OnMouseOver> <OnMouseOut> <Color Duration=".2" PropertyKey="color" StartValue="#FF0000" EndValue="#FFFFFF" /> </OnMouseOut> </Animations> </cc1:AnimationExtender> <asp:Panel ID="showQuestion" runat="server" BackColor="#C0FFFF" BorderColor="Red" BorderWidth="1px" Height="73px" Width="147px"> <br /> 您是如何知道本<br /> 网站的?</asp:Panel> <asp:Panel ID="showAnswer" runat="server" BackColor="#C0FFC0" BorderColor="Blue" BorderWidth="1px" Height="89px" Width="146px"> <br /> A博客<br /> B搜索引擎<br /> C朋友介绍</asp:Panel> <cc1:HoverMenuExtender ID="hmQuestion" runat="server" TargetControlID="lnkQuestion" PopupControlID="showQuestion" PopupPosition="bottom"> </cc1:HoverMenuExtender> <cc1:HoverMenuExtender ID="hmAnswer" runat="server" TargetControlID="lnkAnswer" PopupControlID="showAnswer" PopupPosition="bottom"> </cc1:HoverMenuExtender> </form> </body> </html>