“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.(可选)选择要为其应用效果的内容或布局元素。
2.在“行为”面板(“窗口”>“行为”)中,单击加号 (+) 按钮,从菜单中选择“效果”>“晃动”。
3.从目标元素菜单中,选择元素的 ID。如果已选择元素,请选择“<当前选定内容>”。
应用滑动效果
要使滑动效果正常工作,必须将目标元素封装在具有唯一 ID 的容器标签中。用于封装目标元素的容器标签必须是 blockquote、dd、form、div 或 center 标签。
目标元素标签必须是以下标签之一:blockquote、dd、div、form、center、table、span、input、textarea、select 或 image。
1.(可选)选择要应用效果的内容的容器标签。
2.在“行为”面板(“窗口”>“行为”)中,单击加号 (+) 按钮,并从菜单中选择“效果”>“滑动”。
3.dw来回滚动代码从目标元素菜单中选择容器标签的 ID。如果已选择容器,请选择 <当前选定内容>。
4.在“效果持续时间”域中,定义出现此效果所需的时间,用毫秒表示。
5.选择要应用的效果:“上滑”或“下滑”。
6.在“上滑自”框中,以百分比或像素值形式定义起始滑动点。
7.在“上滑到”框中,以百分比或正像素值形式定义滑动结束点。
8.如果您希望该效果是可逆的,即通过连续单击上下滑动,请选择“切换效果”。
应用挤压效果
注: 此效果仅可用于下列 HTML 元素:address、dd、div、dl、dt、form、img、p、ol、ul、applet、center、dir、menu 和 pre。
1.(可选)选择要为其应用效果的内容或布局元素。
2.在“行为”面板(“窗口”>“行为”)中,单击加号 (+) 按钮,从菜单中选择“效果”>“挤压”。
3.从目标元素菜单中,选择元素的 ID。如果已选择元素,请选择“<当前选定内容>”。
添加其它效果
同一个元素可以关联多个效果行为,得到的结果将非常有趣。
1.(可选)选择要为其应用效果的内容或布局元素。
2.在“行为”面板(“窗口”>“行为”)中,单击加号 (+) 按钮,从“效果”菜单中选择效果。
3.从目标元素菜单中,选择元素的 ID。如果已选择元素,请选择“<当前选定内容>”。
删除效果
您可以从元素中删除一个或多个效果行为。
1.(可选)选择要为其应用效果的内容或布局元素。
2.在“行为”面板(“窗口”>“行为”)中,单击要从行为列表中删除的效果。
3.执行下列操作之一:
∙在子面板的标题栏中单击“删除事件”按钮 (-)。
∙右键单击 (Windows) 或按住 Control 并单击 (Macintosh) 要删除的行为,然后选择“删除行为”。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论