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

《JavaScript+jQuery网页特效设计实例教程 教学课件 作者 陈承欢 单元7 设计选项卡类网页特效.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、单元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.1JavaScript的数组对象1．定义数

2、组2．访问数组3．JavaScriptArray对象的主要属性和方法7.2JSON及其使用【引导训练】任务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.ht

3、ml中的横向选项卡任务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等方法设计横向选项

4、卡与图文滚动特效【任务描述】网页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和c

5、lassName等属性设计横向选项卡【任务描述】网页0709.html中的横向选项卡如图7-9所示，单击选项卡标题即可切换选项卡。图7-9网页0709.html中的横向选项卡任务7-10应用jQuery的mouseover和show等方法设计横向选项卡【任务描述】网页0710.html中的横向选项卡如图7-10所示，当鼠标指针指向小图形按钮时，即可切换选项卡。图7-10网页0710.html中的横向选项卡