河南中医药大学：《Web交互开发》实验指导_05.实验五：jQuery动画[JH-2018]

《Web交互开发》实验教学指导/实验五: jQuery动画 《Web交互开发》实验教学指导 实验五: jQuery动画 、实验目的(5分) 1、掌握 jQuery事件应用的使用方法; 2、掌握 jQuery动画效果的使用方法 3、理解 jQuery编写程序的方法 二、实验环境(5分) 1、 Windows XP/Windows7操作系统的计算机; 2、局域网网络环境,并且使用固定IP地址。 三、实验要求(5分) 1、完成网页选项卡的编写 2、完成文章排版 3、完成对图片的控制操作; 四、实验原理(5分) 1、 jQuery语法; 2、 jQuery事件的使用 3、 jQuery动画的使用。 五、实验步骤(40分) 1、网页选项卡 (1)网页选项卡:通过单击标题实现内容隐藏或显示的切换。具体效果如图5-1所示 家居电器 手 欢迎您来到电器城 图5-1网页选项卡 (2)请完成下面的任务 任务一:编写代码完成表格的HTML编写:(5分 任务二:编写代码完成 jQuery的编写。(5分) 要求 请将上述主要代码,填写到实验报告册中。 本讲共计3页|当前第1页

《Web 交互开发》实验教学指导 / 实验五：jQuery 动画 本讲共计 3 页 | 当前第 1 页 《Web 交互开发》实验教学指导 实验五：jQuery 动画 一、实验目的（5 分） 1、掌握 jQuery 事件应用的使用方法； 2、掌握 jQuery 动画效果的使用方法； 3、理解 jQuery 编写程序的方法； 二、实验环境（5 分） 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求（5 分） 1、完成网页选项卡的编写； 2、完成文章排版； 3、完成对图片的控制操作； 四、实验原理（5 分） 1、jQuery 语法； 2、jQuery 事件的使用； 3、jQuery 动画的使用。 五、实验步骤（40 分） 1、网页选项卡 （1）网页选项卡：通过单击标题实现内容隐藏或显示的切换。具体效果如图 5-1 所示：。 （2）请完成下面的任务： 任务一：编写代码完成表格的 HTML 编写；（5 分） 任务二：编写代码完成 jQuery 的编写。（5 分） 要求： 请将上述主要代码，填写到实验报告册中。 图 5-1 网页选项卡

《Web交互开发》实验教学指导/实验五: jQuery动画 2、文章排版 (1)当有大量的段落内容时,有时仅需要显示一部分的内容,隐藏一部分的内容,单击页面 中的“显示”按钮,可以査看全部内容,单击“隐藏”将部分内容隐藏。 (2)样式如图所示5-2-1,5-2-2所示 优秀的程序开发员,除需握专业 个优秀的程序开发员,除需掌握专业 的开发语言,还要具有执着、沉稳、细致的 的开发语言,还要具有显示 专业素质息菰 图5-2-2文章排版 图5-2-1文章排版 (3)请完成下面的任务 任务一:编写如图5-2-1和5-2-2的程序。(10分) 要求 请将上述任务的操作方法,填写到实验报告册中。 3、图片的淡入淡出 (1)针对图片进行操作,单击 fadeIn时图片进入,单击 fadeOut时图片消失,另外还可设置 图片的不透明度,例如1.00.8,0602等。初始化时如图5-3-1所示,失去焦点时如图5-3-2所示。 fadwinbso0ut DM 图5-3-1初始效果 图5-3-2不透明度为04时的效果 )完成下述任务。 任务一:编写程序实现图片淡入淡出的效果。(10分) 任务二:编写程序实现图片不透明度的设置效果。(10分) 要求 请将上述实验任务的主要代码,填写到实验报告册中。 六、自主实验步骤(20分) 列表框的使用 本讲共计3页当前第2页

《Web 交互开发》实验教学指导 / 实验五：jQuery 动画 本讲共计 3 页 | 当前第 2 页 2、文章排版 （1）当有大量的段落内容时，有时仅需要显示一部分的内容，隐藏一部分的内容，单击页面 中的“显示”按钮，可以查看全部内容，单击“隐藏”将部分内容隐藏。 （2）样式如图所示 5-2-1，5-2-2 所示。 （3）请完成下面的任务： 任务一：编写如图 5-2-1 和 5-2-2 的程序。（10 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 3、图片的淡入淡出 （1）针对图片进行操作，单击 fadeIn 时图片进入，单击 fadeOut 时图片消失，另外还可设置 图片的不透明度，例如 1.0,0.8,0.6,0.2 等。初始化时如图 5-3-1 所示，失去焦点时如图 5-3-2 所示。 （2）完成下述任务。 任务一：编写程序实现图片淡入淡出的效果。（10 分） 任务二：编写程序实现图片不透明度的设置效果。（10 分） 要求： 请将上述实验任务的主要代码，填写到实验报告册中。 六、自主实验步骤（20 分） 1、列表框的使用 图 5-2-1 文章排版 图 5-2-2 文章排版 图 5-3-1 初始效果 图 5-3-2 不透明度为 0.4 时的效果

《Web交互开发》实验教学指导/实验五: jQuery动画 (1)页面页面如图5-4-1和5-4-2所示。 r:活√品牌:国还:[重]厂:[品牌:国2里号:号2[ 您选择的厂商;厂商1您选择的品牌:品牌12您选择的型号:型号121 图5-4-1列表框页面1 图5-4-2列表框页面2 (2)完成下述任务。 任务一:完成级联列表框,如图5-4-1页面的编写。(5分) 任务二:完成级联列表框,如图5-4-2页面的功能。(15分) 要求 请将完成上述任务的步骤,填写到实验报告册中。 七、思考及问答(20分) 1、s( document) ready方法和 window. onload有什么区别?(5分) 2、 jQuery中的 hover和 toggle有什么区别?(5分) 3、 jQuery中的事件冒泡是怎么执行的,如何停止冒泡事件的发生?(5分) 4、 jQuery中 animate()函数的参数有哪些?分别是什么意思?(5分) 本讲共计3页|当前第3页

《Web 交互开发》实验教学指导 / 实验五：jQuery 动画 本讲共计 3 页 | 当前第 3 页 （1）页面页面如图 5-4-1 和 5-4-2 所示。 （2）完成下述任务。 任务一：完成级联列表框，如图 5-4-1 页面的编写。（5 分） 任务二：完成级联列表框，如图 5-4-2 页面的功能。（15 分） 要求： 请将完成上述任务的步骤，填写到实验报告册中。 七、思考及问答（20 分） 1、$(document).ready()方法和 window.onload 有什么区别？（5 分） 2、jQuery 中的 hover()和 toggle()有什么区别？（5 分） 3、jQuery 中的事件冒泡是怎么执行的，如何停止冒泡事件的发生？（5 分） 4、jQuery 中 animate（）函数的参数有哪些？分别是什么意思？（5 分） 图 5-4-1 列表框页面 1 图 5-4-2 列表框页面 2