JavaScript+jQuery网页特效设计实例教程 作者 陈承欢 单元8 设计内容展开与折叠类网页特效.pptVIP

任务8-6 应用jQuery的slideUp和slideDown等方法设计网页内容折叠与展开特效 【任务描述】 网页0806.html中折叠与展开网页内容特效的初始状态如图8-12所示，单击超链 接则显示对应的网页内容，如图8-13所示。 图8-12　网页0806.html中折叠与展开网页内容特效的初始状态 图8-13　在网页0806.html中单击超链接显示对应的网页内容 【同步训练】 任务8-7 应用DOM的getElementById 方法和className属性设计网页内容 折叠与展开特效 【任务描述】 网页0807.html中折叠与展开网页内容特效的初始状态如图8-14所示，单击超链接“投影机”时展开相应的网页内容，如图8-15所示。 图8-14　网页0807.html中折叠与展开 网页内容特效的初始状态 图8-15　在网页0807.html中单击超链接“投影机”时展开相应的网页内容 任务8-8 应用jQuery的hover和click事件设计网页内容折叠与展开特效 【任务描述】 网页0808.html中折叠与展开网页内容特效的初始状态如图8-16所示，鼠标指针指向 按钮时，自动显示如图8-17所示的库存地区列表。 图8-16　网页0808.html中折叠与展开网页内容特效的初始状态 图8-17　网页0808.html中自动显示库存地区列表 任务8-9 应用jQuery的toggle和hasClass方法设计网页内容折叠与展开特效 【任务描述】 网页0809.html中折叠与展开网页内容特效的初始状态如图8-18所示，单击 按钮时，展开隐藏的部分内容，如图8-19所示。 图8-18　网页0809.html中折叠与展开网页内容特效的初始状态 图8-19　在网页0809.html中展开隐藏的部分内容 任务8-10 应用jQuery的data和animate等方法设计网页内容折叠与展开特效 【任务描述】 网页0810.html中折叠与展开网页内容特效的初始状态如图8-20所示。 在该网页中单击 按钮隐藏对应的网页内容，单击 按钮显示对应的网页内容，如图8-21所示。 图8-20　网页0810.html中折叠与展开　　　　　网页内容特效的初始状态 图8-21　网页0810.html中分别隐藏和显示相关内容的外观效果 单元8 设计内容展开与折叠类网页特效 任务8-1 应用jQuery的each和 hasClass等方法设计网页内容折 叠与展开特效 网页0801.html中折叠与展开网页内容的特效如图8-1所示，单击 按钮，即可折叠网页内容，单击 按钮，即可展开网页内容，如图8-2所示。 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 图8-1　网页0801.html中折叠与展开网页内容的特效 图8-2　网页0801.html中网页内容的折叠与展开效果 任务8-2 应用jQuery的toggle和 css等方法实现网页内容多层折 叠与展开特效 【知识必备】 8.1　BOM（浏览器对象模型） 1．浏览器对象模型的层次结构 （1）第一层次。 （2）第二层次。 （3）第三层次。 （4）第四层次。 2．window 对象及其属性和方法 该对象常用的属性与方法如下。 （1）defaultStatus属性：用于设置或获取默认的状态栏信息。 （2）status属性：用于设置或获取窗口状态栏中的信息。 （3）self属性：表示当前window对象本身。 （4）parent属性：表示当前窗口的父窗口。 （5）open（参数表）方法：打开一个具有指定名称的新窗口。 （6）close()方法：表示关闭当前窗口。 （7）moveTo(x , y)方法：表示移动当前窗口。 （8）resizeTo(height , width)方法：表示调整当前窗口的尺寸。 （9）resizeBy(w , h)方法：表示窗口宽度增大w，高度增大h。 （10）showModalDialog()方法：在一个模式窗口中显示指定的HTML文档。 3．document对象及其属性和方法 document对象常用的属性与方法如下。 （1）all属性：表示文档中所有HTML标记符的数组。 （2）bgColor属性：用于获取或设置网页文档的背景颜色。 例如，document.bgColor=green; alert(document.bgColor); （3）fgColor：用于获取或设置