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

单元7 设计选项卡类网页特效 【特效赏析】 任务7-1 应用setInterval函数和display属性实现选项卡的手动切换和自动切换 网页0701.html中的选项卡如图7-1所示。 单击选项卡标题能实现手动切换，同时该选项卡还能自动进行切换。 图7-1　网页0701.html中的选项卡 任务7-2 应用jQuery的index和find等方法实现横向选项卡 网页0702.htm中的横向选项卡如图7-2所示，单击选项卡标题实现选项卡的切换。 图7-2　网页0702.htm中的横向选项卡 【知识必备】 7.1　JavaScript的数组对象 1．定义数组 2．访问数组 3．JavaScript Array对象的主要 属性和方法 7.2　JSON及其使用 【引导训练】 任务7-3 应用DOM的className 和style等属性设计纵向选项卡 【任务描述】 网页0703.html中的纵向选项卡如图7-3所示，鼠标指针指向选项卡标题时自动切换选项卡。 图7-3　网页0703.html中的纵向选项卡 任务7-4 应用DOM的className和style等属性设计横向选项卡 【任务描述】 网页0704.html中的横向选项卡如图7-4所示，鼠标指针指向选项卡标题时实现选项卡的切换。 图7-4　网页0704.html中的横向选项卡 任务7-5 应用DOM的parentNode属性和JSON设计纵向选项卡 【任务描述】 网页0705.html中的纵向选项卡如图7-5所示，鼠标指针指向纵向选项卡标题时自动切换选项卡。 图7-5　网页0705.html中的纵向选项卡 任务7-6 应用仿jQuery的attr方法设计横向选项卡 【任务描述】 网页0706.html中的横向选项卡如图7-6所示，单击选项卡标题即可切换选项卡。 图7-6　网页0706.html中的横向选项卡 任务7-7 应用JavaScript的push和jQuery的animate等方法设计横向选项卡与图文滚动特效 【任务描述】 网页0707.html中的选项卡如图7-7所示，当鼠标指针指向选项卡标题可以切换选项卡，单击选项卡标题下方左侧的按钮时可以向左滚动下方图文，单击右侧的按钮可以向右滚动下方的图文。 图7-7　网页0707.html中的选项卡及图文内容 任务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 应用jQuery的mouseover和show等方法设计横向选项卡 【任务描述】 网页0710.html中的横向选项卡如图7-10所示，当鼠标指针指向小图形按钮时，即可切换选项卡。 图7-10　网页0710.html中的横向选项卡 在线教务辅导网： 更多课程配套课件资源请访问在线教务辅导网