//首先建立一个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 />
Ａ博客<br />
Ｂ搜索引擎<br />
Ｃ朋友介绍</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>
分享到：
相关推荐
如何实现淡入淡出效果Visual Basic6.0程序，VB6.0源代码
实现了轮播图的淡入淡出效果，并有左右切换，底部圆点切换效果
【原生js】【轮播图系列】三种方式实现淡入淡出效果图片素材 html+css代码：https://blog.csdn.net/Krstation/article/details/106600381 js代码：https://blog.csdn.net/Krstation/article/details/106616048
viewpagerTab淡入淡出动画
原生js鼠标滑过文字淡入淡出效果 原生js鼠标滑过文字淡入淡出效果 原生js鼠标滑过文字淡入淡出效果 原生js鼠标滑过文字淡入淡出效果
这是一个动画示例程序, 实现淡入淡出， 缩放， 移动， 旋转 详情请参见： http://blog.csdn.net/aduovip/article/details/6406466
基于C#开发的WPF应用程序，实现的是控件的淡入淡出效果的展示，可用于按钮、图片、容器等相关的控件，欢迎大家参考使用
不仅可以用具体的代码来实现淡入淡出的效果，Axure也具有类似强大的功能，小伙伴们快来下载`(*∩_∩*)′！
用fadeIn、fadeOut、fadeToggle来实现淡入淡出。
淡入淡出效果.淡入淡出效果.淡入淡出效果.淡入淡出效果.
VB 窗口淡入淡出效果示例 VB 窗口淡入淡出效果示例
javascript实现的淡入淡出效果的TAB标签源码
最简单的代码阐述最深刻的原理。图片淡入淡出效果的原理及实现，感谢大家支持
源代码可以直接运行实现图片的淡入淡出切换效果
该程序实现了窗口的淡入淡出效果
通过改变图片透明度，实现图片淡入淡出效果
应用Secret 中的效果实现的文字淡入淡出的效果，不同的文字淡入淡出的效果、速度是不同的。项目地址：https://github.com/matthewrkula/SecretTextView效果图：如何使用SecretTextView继承了android.widget.TextView...
该Demo实现了窗体的淡入淡出效果，窗口加载和窗口退出的时候，显示淡入淡出效果。
js_图片淡入淡出效果_图片
纯jquery实现图片的淡入淡出，内容简单 一看即懂 实用