通过客户端代码操作 DropShadow 属性 (VB)
AJAX 控件工具包中的 DropShadow 控件使用投影扩展面板。 还可以使用客户端 JavaScript 代码更改此扩展程序的属性。
概述
AJAX 控件工具包中的 DropShadow 控件使用投影扩展面板。 还可以使用客户端 JavaScript 代码更改此扩展程序的属性。
步骤
代码以包含一些文本行的面板开头：
<asp:Panel ID="panelShadow" runat="server" CssClass="panel" Width="300px">
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">
.panel {background-color: navy;}
</style>
DropShadowExtender添加 以扩展具有投影效果的面板，不透明度设置为 50%：
<ajaxToolkit:DropShadowExtender ID="dse1" runat="server"
TargetControlID="panelShadow"
Opacity="0.5" Rounded="true" />
然后，ASP.NET AJAX ScriptManager 控件使 Control Toolkit 能够正常工作：
<asp:ScriptManager ID="asm" runat="server" />
另一个面板包含两个 JavaScript 链接，用于设置投影的不透明度：减号链接可降低阴影的不透明度，加号链接会增加阴影的不透明度。
<asp:Panel ID="panelControl" runat="server">
<br />
<label id="txtOpacity" runat="server">0.5</label>
<a href="#" onclick="changeOpacity(-0.1); return false;">-</a>
<a href="#" onclick="changeOpacity(+0.1); return false;">+</a>
</asp:Panel>
然后，JavaScript 函数 changeOpacity() 必须首先在页面上找到 DropShadowExtender 控件。 ASP.NET AJAX 为该任务定义 $find() 方法。 然后， get_Opacity() 方法检索当前不透明度， set_Opacity() 方法设置它。 然后，JavaScript 代码将当前不透明度值放在 元素中 <label> ：
<script type="text/javascript">
function changeOpacity(delta)
{
var dse = $find("dse1");
var o = dse.get_Opacity();
o += delta;
o = Math.round(10 * o) / 10;
if (o <= 1.0 && o >= 0.0)
{
dse.set_Opacity(o);
$get("txtOpacity").firstChild.nodeValue = o;
}
}
</script>
客户端上的不透明度 (单击以查看全尺寸图像)
