Web编程基础实验：行为与Spry验证技术应用.pdfVIP

实验八行为和spry

班级：网络111学号：112208206124：刘德伦

【实验目的】

掌握网页中网页中行为技术和Spry验证构件的使用。

【实验要求】

1、掌握行为的创建；

2、练习制作图像特效；

3、练习启用浏览器窗口;

4、掌握效果行为。

5、练习spry验证的基本操作。

【实验内容与步骤】

利用素材“练习案例-甜品饮料吧”进行练习制作图像特效,最终效果参考“练习案例-最终效果甜

品饮料吧”。

1、为“练习案例-甜品饮料吧”创建相应站点。

2、在“热卖产品”下方，分别为图像“茉莉花香”，“冰火两重天”，“生命之绿”，“巨杯甜

饮”添加显示-隐藏元素特效，实现鼠标经过不同，在网页特色产品单元格右侧显示其放大

，放大分别为：big1-1.jpg，big2-1.jpg，big3-1.jpg，big4-1.jpg。

运行结果：

3、在“特色产品”下方，自左至右，自上至下，分别图像a-1.jpg-f-1.jpg，并添加交换图像

特效，交换分别设为a.jpg-f.jpg。

运行结果

利用素材“练习案例-美达人寿”练习制作启用浏览器窗口效果，最终效果参考“练习案例-最

终效果美达人寿”。

1、为“练习案例-美达人寿”创建相应站点。

2、打开网页index.html的同时，启动新窗口index1.html

3、启动窗口宽度300px，窗口高度500px。

运行结果：

利用素材“练习案例-我们爱猫网”练习制作效果特效，最终效果参考“练习案例-最终效果我们

爱猫网”。

1、为“练习案例-我们爱猫网”创建相应站点。

2、为网页index.html中的4幅，添加增大/收缩、挤压、显示/渐隐和晃动4种不同的效果。

运行结果：

利用素材“练习案例-儿童培训”进行练习Spry验证构件的使用,最终效果参考“练习案例-最终

效果儿童培训”。

1、为“练习案例-儿童培训”创建相应站点。

2、各单元格中的Spry验证构件及属性如下：

3、小朋友：Spry验证文本域，最小字符数为4；

4、：Spry单选按钮组，必填；

5、与特长：Spry复选框，最小选择数1；

6、：Spry验证选择（四岁、五岁、六岁、七岁，对应的值为4、5、6、7），不允许空值；

7、就读学校：Spry验证文本域，最小字符数为8；

8、其它说明：Spry验证文本区域，最大字符数为60；

9、家长：Spry验证文本域，最小字符数为8。

运行效果

【实验心得与体会】

通过本次实验学会了如何制作图像特效，掌握了行为的创建，学会了spry验证的基本

操作；对以后制作特效和文本输入检测有很大的帮助。当然在实验中也遇到了js

不上等问题，但通过查阅资料也都一一解决。