dw中spry全面讲解教程

“Spry 效果”是视觉增强功能，可以将它们应用于使用

JavaScript 的 HTML 页面上几乎所有的元素。效果通常用于在一

段时间内高亮显示信息，创建动画过渡或者以可视方式修改页面

元素。您可以将效果直接应用于 HTML 元素，而无需其它自定义

标签。

注：要向某个元素应用效果，该元素当前必须处于选定状态，或者它必须具有一个 ID。例如，如果要向当前未选定的 div 标签应用高亮显示效果，该 div 必须具有一个有效的 ID 值。如果该元素尚且没有有效的 ID 值，您将需要向 HTML 代码中添加一个 ID 值。

效果可以修改元素的不透明度、缩放比例、位置和样式属性（如

背景颜色）。可以组合两个或多个属性来创建有趣的视觉效果。

由于这些效果都基于 Spry，因此在用户单击应用了效果的元素

时，仅会动态更新该元素，不会刷新整个 HTML 页面。

Spry 包括下列效果：

显示/渐隐

使元素显示或渐隐。

高亮颜色

更改元素的背景颜色。

遮帘

模拟百叶窗，向上或向下滚动百叶窗来隐藏或显示元素。

滑动

上下移动元素。

增大/收缩

使元素变大或变小。

晃动

模拟从左向右晃动元素。

挤压

使元素从页面的左上角消失。

重要说明：当您使用效果时，系统会在“代码”视图中将不同的代码行添加到您的文件中。其中的一行代码用来标识 SpryEffects.js 文件，该文件是包括这些效果所必需的。请不要从代码中删除该行，否则这些效果将不起作用。

有关 Spry 框架中可用的 Spry 效果的全面概述，请访问

应用显示/渐隐效果

注：此效果可用于除下列元素之外的所有 HTML 元素：applet、body、iframe、object、tr、tbody 和 th。

1.（可选）选择要为其应用效果的内容或布局元素。

2.在“行为”面板（“窗口”>“行为”）中，单击加号 (+)

按钮，从菜单中选择“效果”>“显示/渐隐”。

3.从目标元素菜单中，选择元素的 ID。如果已选择元素，请

选择“<当前选定内容>”。

4.在“效果持续时间”框中，定义此效果持续的时间，用毫

秒表示。

5.选择要应用的效果：“渐隐”或“显示”。

6.在“渐隐自”框中，定义显示此效果所需的不透明度百分

比。

7.在“渐隐到”框中，定义要渐隐到的不透明度百分比。

8.如果您希望该效果是可逆的（即连续单击即可从“渐隐”

转换为“显示”或从“显示”转换为“渐隐”），请选择“切

换效果”。

应用遮帘效果

注：此效果仅可用于下列 HTML 元素：address、dd、div、dl、dt、form、h1、h2、h3、h4、h5、h6、p、ol、ul、li、applet、center、dir、menu 和 pre。

1.（可选）选择要为其应用效果的内容或布局元素。

2.在“行为”面板（“窗口”>“行为”）中，单击加号 (+)

按钮，从菜单中选择“效果”>“遮帘”。

3.从目标元素菜单中，选择元素的 ID。如果已选择元素，请

选择“<当前选定内容>”。

4.在“效果持续时间”框中，定义此效果持续的时间，用毫

秒表示。

5.选择要应用的效果：“向上遮帘”或“向下遮帘”。

6.在“向上遮帘自/向下遮帘自”框中，以百分比或像素值形

式定义遮帘的起始滚动点。这些值是从元素的顶部开始计算的。

7.在“向上遮帘到/向下遮帘到”域中，以百分比或像素值形

式定义遮帘的结束滚动点。这些值是从元素的顶部开始计算的。

8.如果您希望该效果是可逆的（即连续单击即可上下滚动），

请选择“切换效果”。

应用增大/收缩效果

注：此效果可用于下列 HTML 元素：address、dd、div、dl、dt、form、p、ol、ul、applet、center、dir、menu 和 pre。

1.（可选）选择要为其应用效果的内容或布局元素。

2.在“行为”面板（“窗口”>“行为”）中，单击加号 (+)

按钮，从弹出菜单中选择“效果”>“增大/收缩”。

3.从目标元素弹出菜单中，选择元素的 ID。如果已选择元素，

请选择“<当前选定内容>”。

4.在“效果持续时间”域中，定义出现此效果所需的时间，

用毫秒表示。

5.选择要应用的效果：“增大”或“收缩”。

6.在“增大自/收缩自”框中，定义元素在效果开始时的大小。

该值为百分比大小或像素值。

7.在“增大到/收缩到”框中，定义元素在效果结束时的大小。

该值为百分比大小或像素值。

8.如果您为“增大自/收缩自”或“增大到/收缩到”框选择

像素值，“宽/高”域就会可见。元素将根据您选择的选项相应

地增大或收缩。

9.选择您希望元素增大或收缩到页面的左上角还是页面的中

心。

10.如果您希望该效果是可逆的（即，连续单击即可增大或收

缩），请选择“切换效果”。

应用高亮效果

注：此效果可用于除下列元素之外的所有 HTML 元素：applet、body、frame、frameset 和 noframes。

1.（可选）选择要为其应用效果的内容或布局元素。

2.在“行为”面板（“窗口”>“行为”）中，单击加号 (+)

按钮，从菜单中选择“效果”>“高亮显示”。

3.从目标元素菜单中，选择元素的 ID。如果已选择元素，请

选择“<当前选定内容>”。

4.在“效果持续时间”框中，定义您希望此效果持续的时间，

用毫秒表示。

5.选择您希望以哪种颜色开始高亮显示。

6.选择您希望以哪种颜色结束高亮显示。此效果将持续的时

间为您在“效果持续时间”中定义的时间。

7.选择元素在完成高亮显示之后的颜色。

8.如果您希望该效果是可逆的，即通过连续单击来循环使用

高亮颜色，请选择“切换效果”。

应用晃动效果

注：此效果适用于下列 HTML 元素：address、blockquote、dd、div、dl、dt、fieldset、form、h1、h2、h3、h4、h5、h6、iframe、img、object、p、ol、ul、li、applet、dir、hr、menu、pre 和 table。

1.（可选）选择要为其应用效果的内容或布局元素。