JavaScript+jQuery网页特效设计实例教程 教学课件 陈承欢 单元7 设计选项卡类网页特效.pdfVIP

单元7 设计选项卡类网页特效 单元7 设计选项卡类网页特效 【特效赏析】 任务7-1 应用setInterval函数和display 属性实现选项卡的手动切换和自动切换 网页0701.html 中的选项卡如图7-1所示。 单击选项卡标题能实现手动切换，同时该选 项卡还能自动进行切换。 图7-1　网页0701.html中的选项卡 任务7-2 应用jQuery的index和find等 任务7-2 应用jQuery的index和find等 方法实现横向选项卡 方法实现横向选项卡 网页0702.htm 中的横向选项卡如图7-2所示， 单击选项卡标题实现选项卡的切换。 图7-2　网页0702.htm中的横向选项卡 【知识必备】 7.1　JavaScript 的数组对象 7.1　JavaScript 的数组对象 1 ．定义数组 2 ．访问数组 3 ．JavaScript Array对象的主要 属性和方法 7.2　JSON 及其使用 7.2　JSON 及其使用 【引导训练】 任务7-3 应用DOM的className 和style等属性设计纵向选项卡 【任务描述】 网页0703.html 中的纵向选项卡如图 7-3所示，鼠标指针指向选项卡标题时自 动切换选项卡。 图7-3　网页0703.html中的纵向选项卡 任务7-4 应用DOM的className 任务7-4 应用DOM的className 和style等属性设计横向选项卡 和style等属性设计横向选项卡 【任务描述】 网页0704.html 中的横向选项卡如图 7-4所示，鼠标指针指向选项卡标题时实 现选项卡的切换。 图7-4　网页0704.html中的横向选项卡 任务7-5 应用DOM的parentNode 任务7-5 应用DOM的parentNode 属性和JSON设计纵向选项卡 属性和JSON设计纵向选项卡 【任务描述】 网页0705.html 中的纵向选项卡如图 7-5所示，鼠标指针指向纵向选项卡标题 时自动切换选项卡。 图7-5　网页0705.html中的纵向选项卡 任务7-6 应用仿jQuery的attr方法 任务7-6 应用仿jQuery的attr方法 设计横向选项卡 设计横向选项卡 【任务描述】 网页0706.html 中的横向选项卡如图 7-6所示，单击选项卡标题即可切换选项 卡。 图7-6　网页0706.html中的横向选项卡 任务7-7 应用JavaScript的push和jQuery 任务7-7 应用JavaScript的push和jQuery 的animate等方法设计横向选项卡与图文 的animate等方法设计横向选项卡与图文 滚动特效 滚动特效 【任务描述】 网页0707.html 中的选项卡如图7-7所 示，当鼠标指针指向选项卡标题可以切 换选项卡，单击选项卡标题下方左侧的 按钮时可以向左滚动下方图文，单击右 侧的按钮可以向右滚动下方的图文。 图7-7　网页0707.html中的选项卡及图文内容 任务7-8 应用jQuery的each和css 任务7-8 应用jQuery的each和css 方法设计纵向选项卡 方法设计纵向选项卡 【任务描述】 网页0708.html的纵向选项卡如图7-8 所示，鼠标指针指向选项卡标题即可切 换选项卡。 图7-8　网页0708.html的纵向选项卡 【同步训练】 任务7-9 应用DOM的getElementById 和className等属性设计横向选项卡 【任务描述】 网页0709.html 中的横向选项卡如图7-9所 示，单击选项卡标题即可切换选项卡。 图7-9　网页0709.html中的横向选项卡 任务7-10 应用jQu