设计内容展开与折叠类网页特效课件.ppt

1、任务任务8-1 应用应用jQuery的的each和和hasClass等方法设计网页内容折等方法设计网页内容折叠与展开特效叠与展开特效 网页网页0801.html中折叠与展开网页内容的特效如图中折叠与展开网页内容的特效如图8-1所示，单击所示，单击 按钮，即可折叠网页内按钮，即可折叠网页内容，单击容，单击 按钮，即可展开网页内容，如图按钮，即可展开网页内容，如图8-2所示。所示。图图8-1网页网页0801.html中折叠与展开网页内容的特效中折叠与展开网页内容的特效图图8-2网页网页0801.html中网页内容的折叠与展开效果中网页内容的折叠与展开效果任务任务8-2 应用应用jQuery的的to

2、ggle和和css等方法实现网页内容多层折等方法实现网页内容多层折叠与展开特效叠与展开特效【知识必备】【知识必备】1浏览器对象模型的层次结构浏览器对象模型的层次结构（1）第一层次。）第一层次。（2）第二层次。）第二层次。（3）第三层次。）第三层次。（4）第四层次。）第四层次。 该对象常用的属性与方法如下。该对象常用的属性与方法如下。 （1）defaultStatus属性：用于设置或获取默认的状态栏信息。属性：用于设置或获取默认的状态栏信息。 （2）status属性：用于设置或获取窗口状态栏中的信息。属性：用于设置或获取窗口状态栏中的信息。 （3）self属性：表示当前属性：表示当前window

3、对象本身。对象本身。 （4）parent属性：表示当前窗口的父窗口。属性：表示当前窗口的父窗口。 （5）open（参数表）方法：打开一个具有指定名称的新窗口。（参数表）方法：打开一个具有指定名称的新窗口。 （6）close()方法：表示关闭当前窗口。方法：表示关闭当前窗口。 （7）moveTo(x , y)方法：表示移动当前窗口。方法：表示移动当前窗口。 （8）resizeTo(height , width)方法：表示调整当前窗口的尺寸。方法：表示调整当前窗口的尺寸。 （9）resizeBy(w , h)方法：表示窗口宽度增大方法：表示窗口宽度增大w，高度增大，高度增大h。 （10）showM

4、odalDialog()方法：在一个模式窗口中显示指定的方法：在一个模式窗口中显示指定的HTML文档。文档。 document对象常用的属性与方法如下。对象常用的属性与方法如下。 （1）all属性：表示文档中所有属性：表示文档中所有HTML标记符的数组。标记符的数组。 （2）bgColor属性：用于获取或设置网页文档的背景颜色。属性：用于获取或设置网页文档的背景颜色。 例如，例如，document.bgColor=green; alert(document.bgColor); （3）fgColor：用于获取或设置网页文本颜色（前景色）。：用于获取或设置网页文本颜色（前景色）。 （4）linkC

5、olor属性：用于获取或设置未单击过的链接颜色。属性：用于获取或设置未单击过的链接颜色。 （5）alinkColor属性：用于获取或设置激活链接的颜色。属性：用于获取或设置激活链接的颜色。 （6）vlinkColor属性：用于获取或设置已单击过链接的颜色。属性：用于获取或设置已单击过链接的颜色。 （7）title属性：用于获取或设置网页文档的标题，等价于属性：用于获取或设置网页文档的标题，等价于HTML的的标记。标记。例如，例如，alert(document.title); （8）forms属性：表示网页文档中所有表单的数组。属性：表示网页文档中所有表单的数组。例如，例如，document.f

6、orms0。 （9）write方法：其功能是将字符或变量值输出到窗口。方法：其功能是将字符或变量值输出到窗口。 （10）close方法：将窗口关闭。方法：将窗口关闭。（1）width和和height属性。属性。（2）availWidth属性。属性。（3）availHeight属性。属性。 （1）hostname属性：返回属性：返回Web主机的域名。主机的域名。 （2）path属性：返回当前页面的路径和文件名。属性：返回当前页面的路径和文件名。 （3）port属性：返回属性：返回Web主机的端口（主机的端口（80或或443）。）。 （4）protocol属性：返回所使用的属性：返回所使用的Web

7、协议协议 （http:/或或https:/）。）。 （5）href属性：设置或返回当前页面的属性：设置或返回当前页面的URL。（6）pathname属性：返回属性：返回URL的路径名。的路径名。（7）assign()方法：加载新的文档。方法：加载新的文档。（8）reload()方法：重新加载当前页。方法：重新加载当前页。6history对象及其属性和方法对象及其属性和方法 （1）back()方法：加载历史列表中的前一个方法：加载历史列表中的前一个URL，这与在浏览器中单击，这与在浏览器中单击“后退后退”按钮相同。按钮相同。 （2）forward()方法：加载历史列表中的下一个方法：加载历史列表

8、中的下一个URL，这与在浏览器中单击，这与在浏览器中单击“前进前进”按钮相同。按钮相同。7navigator对象对象 各个尺寸方法对应的值如表各个尺寸方法对应的值如表8-6第第3列所示。列所示。尺寸方法名称尺寸方法名称示例代码示例代码代码对应的尺寸值代码对应的尺寸值width()$(#div1).width()300height()$(#div1).height()100innerWidth()$(#div1).innerWidth()320innerHeight()$(#div1).innerHeight()120outerWidth()$(#div1).outerWidth()322out

9、erHeight()$(#div1).outerHeight()122outerWidth(true)$(#div1).outerWidth(true)328outerHeight(true)$(#div1).outerHeight(true)128表表8-6jQuery常用的尺寸方法常用的尺寸方法【引导训练】【引导训练】任务任务8-3 应用应用DOM的的onclick事事件和件和parentNode属性设计网页属性设计网页内容折叠与展开特效内容折叠与展开特效 【任务描述】【任务描述】 网页网页0803.html中折叠与展开网页内容特效的初始状态如图中折叠与展开网页内容特效的初始状态如图8-6

10、所示，单击所示，单击“收起收起”超链接时，折叠对应的超链接时，折叠对应的网页内容，如图网页内容，如图8-7所示。所示。 单击单击“展开展开”超链接时，展开对应的网页内容。超链接时，展开对应的网页内容。图图8-6折叠与展开网页内容特效的初始状态折叠与展开网页内容特效的初始状态图图8-7单击单击“收起收起”超链接时折叠对应的网页内容超链接时折叠对应的网页内容【任务描述】【任务描述】 网页网页0804.html中折叠与展开网页内容特效的初始状态如图中折叠与展开网页内容特效的初始状态如图8-8所示，单击所示，单击 按钮，即可展开对应的网页内容按钮，即可展开对应的网页内容，如图，如图8-9所示。所示。

11、单击单击 按钮，即可隐藏对应的网页内容。按钮，即可隐藏对应的网页内容。 【任务描述】【任务描述】 网页网页0805.html中折叠与展开网页内容特效的初始状态如图中折叠与展开网页内容特效的初始状态如图8-10所示。所示。 单击单击“展开展开”超链接会展开隐藏的网页内容，如图超链接会展开隐藏的网页内容，如图8-11所示。此时单击所示。此时单击“收起收起”按钮会折叠部分按钮会折叠部分网页内容。网页内容。图图8-10网页网页0805.html中折叠与展开网页内容特效的初始中折叠与展开网页内容特效的初始状态状态图图8-11在网页在网页0805.html中展开隐藏的网页内容中展开隐藏的网页内容 【任务描

12、述】【任务描述】 网页网页0806.html中折叠与展开网页内容特效的初始状态如图中折叠与展开网页内容特效的初始状态如图8-12所示，单击超链所示，单击超链接则显示对应的网页内容，如图接则显示对应的网页内容，如图8-13所示。所示。图图8-12网页网页0806.html中折叠与展开网页内容特效的初始中折叠与展开网页内容特效的初始状态状态图图8-13在网页在网页0806.html中单击超链接显示对应的网页内中单击超链接显示对应的网页内容容 【同步训练】【同步训练】任务任务8-7 应用应用DOM的的getElementById方法和方法和className属性设计网页内容属性设计网页内容折叠与展开

13、特效折叠与展开特效 【任务描述】【任务描述】 网页网页0807.html中折叠与展开网页内容特效的初始状态如图中折叠与展开网页内容特效的初始状态如图8-14所示，单击超链接所示，单击超链接“投影机投影机”时展开相应的网时展开相应的网页内容，如图页内容，如图8-15所示。所示。图图8-14网页网页0807.html中折叠与展开中折叠与展开网页内容特效的初始状态网页内容特效的初始状态图图8-15在网页在网页0807.html中单击超链接中单击超链接“投影机投影机”时展开时展开相应的网页内容相应的网页内容【任务描述】【任务描述】 网页网页0808.html中折叠与展开网页内容特效的初始状态如图中折叠

14、与展开网页内容特效的初始状态如图8-16所示，鼠标指针指向所示，鼠标指针指向 按钮时按钮时，自动显示如图，自动显示如图8-17所示的库存地区列表。所示的库存地区列表。图图8-16网页网页0808.html中折叠与展开网页内容特效的初始中折叠与展开网页内容特效的初始状态状态图图8-17网页网页0808.html中自动显示库存地区列表中自动显示库存地区列表【任务描述】【任务描述】 网页网页0809.html中折叠与展开网页内容特效的初始状态如图中折叠与展开网页内容特效的初始状态如图8-18所示，单击所示，单击 按钮时，展开隐藏的部分内容，如图按钮时，展开隐藏的部分内容，如图8-19所示。所示。图图

15、8-18网页网页0809.html中折叠与展开网页内容特效的初始中折叠与展开网页内容特效的初始状态状态图图8-19在网页在网页0809.html中展开隐藏的部分内容中展开隐藏的部分内容 【任务描述】【任务描述】 网页网页0810.html中折叠与展开网页内容特效的初始状态如图中折叠与展开网页内容特效的初始状态如图8-20所示。所示。 在该网页中单击在该网页中单击 按钮隐藏对应的网页内容，单击按钮隐藏对应的网页内容，单击 按钮显示对应的网页内容，如图按钮显示对应的网页内容，如图8-21所示。所示。图图8-20网页网页0810.html中折叠与展开网页内容中折叠与展开网页内容特效的初始状态特效的初始状态图图8-21网页网页0810.html中分别隐藏和中分别隐藏和显示相关内容的外观效果显示相关内容的外观效果