JavaScript jQuery网页特效设计任务驱动教程（第2版）-教案 单元7、8 设计选项卡类网页特效、 设计内容展开与折叠类网页特效.docx

《JavaScript jQuery网页特效设计任务驱动教程（第2版）-教案 单元7、8 设计选项卡类网页特效、 设计内容展开与折叠类网页特效.docx》由会员分享，可在线阅读，更多相关《JavaScript jQuery网页特效设计任务驱动教程（第2版）-教案 单元7、8 设计选项卡类网页特效、 设计内容展开与折叠类网页特效.docx（44页珍藏版）》请在第一文库网上搜索。

1、单元7设计选项卡类网页特效课程名称JaVaSCriPt+jQuery网页特效设计单元名称设计选项卡类网页特效教学内容设计选项卡类网页特效课时6项目性质口演示性口验证性口设计性J综合性授课班级授课日期授课地点教学目标学会设计选项卡类网页特效正确定义与访问JaVaSCriPt的数组对象掌握JaVaSCriPtArray对象的主要属性和方法了解JSON及其正确使用方法教学难点JavaScriptArray对象的主要属性和方法教学方法任务驱动法、分组讨论法、探究学习法教学准备计算机、多媒体教学设备教学课件PPT教材：JavaScript+jQu.y网页特效设计任务驱动教程（第2版）作业设计教材P217

2、自主训练教学过程教学环节教学内容与过程（教学内容、教学方法、组织形式、教学手段）课前组织做好上课前的各项准备工作（打开计算机、打开课件、吸引学生注意力。打开软件、打开授课计划、教案等），课程说明从特效欣赏“应用SetInterVa1函数和disp1ay教学内容。属性实现选项卡的手动切换和自动切换”引入【特效赏析】任务7-1应用SetInterVa1函数和disp1ay属性实现选项卡的手动切换和自动切换网页0701.htm1中的选项卡如图所示。单击选项卡标题能实现手动切换，同时该选项卡还能自动切换。课程内容描述本周推荐新鲜投氐热卖商品小A”Ji/佐卡伊1分钻石吊出时南羊毛魄持扣束欧珀栗均面保潼浜

3、天然第水a浓修第94歌蹴-怡然陵埴仿羊城大衣列水河照应幡华再色吊坠爱1守护石538OO388001500028800299009800118007690b髓8J堂仕达30c电磁炉AUPU1阳光系WiSTJMXWengef爱国者ago资花餐适用雷慢妙斛列灯暖型浴加羽肩百包-薇色MP3浮I1设计119.0049800299.00149.00998039900800012900网页0701.htm1中的选项卡网页0701.him1中的选项卡对应的HTM1代码如表所示。网页0701.htm1中的选项卡对应的HTM1代码新书上架1番国坊新U巴旦才650g2*120005000.一.工吗味宝贝UhB干列（

4、艮尿湾特大包137.0012600I序号程序代码01020304050607080910本周推荐本周推荐新鲜货bCIaSS=nonce”新鲜货11121314151617181920212223242526272829303132333435363738394041热卖商品热卖商品新书上架spanid=shcwproduct4onDuseover=*proc1uctDivStopOsty1e=*disp1ay:none：OnmOUSeoUt=producIDivP1ay(4)XbC1aSS=nonce”新书上架divc1ass=ffhomepage_prefer_1ist*id=i1*onmo

5、useover=*productDivStop()/onmouseout=*productDivP1ay(1);*sty1e=*disp1ay:b1ock;“网页0701htm1中实现选项卡切换的JaVaSCriPt代码如表所示。网页0701.htm1中实血选项卡切换的JaVaSCriPt代码序号程序代码222222OOOOOOOOo5432098765432098765432function$(id)returndocument.getE1ementBy1d(id);手动切换varpIaynum=I;functionShowproductdiv(id)if(id=O)id=p1aynum:f

6、or(i=1;i=4;i+)if(i=id)$($hoWPrOdUCt+id).sty1e,disp1ay=*b1ock*;$(*imgproduct*+id).sty1e,disp1ay=*none*;$(*i*+id).sty1e,disp1ay=*b1ock*;e1se$(ShOWProdUC1+i).sty1e,disp1ay=*none*;$(*imgproduct*+i).sty1e,disp1ay=*b1ock*;$.sty1e,disp1ay=*none*;)if(p1aynum=4)p1aynum=1;e1sep1aynum+;)自动切换varrayp1ay;function

7、ProductDivP1ay(id)if(id=*)id=O;2627282930313233e1se(p1aynum=id;myp1ay=set1nterva1(*showproductdiv(0)”,2000);functionproductDivStop()c1earinterva1(myp1ay)：)ProductDivP1ay(0);任务7-2应用jQuery的index。和find。等方法实现横向选项卡网页0702.htm中的横向选项卡如图所示，单击选项卡标题可进行选项卡的切换。网页0702.htm中的横向选项卡网页0702.htm中的横向选项卡对应的HTM1代码如表所示。网页07

8、02.htm中的横向选项卡对应的HTM1代码序号程序代码010203促销在进行0405特价宝贝06新品上架07今日必买08创意极品09101112divCIaSS=b1ock”131415161718divCIaSS=none)19202122divC1aSS=none网页0702.htm中实现横向选项卡的JaVaSCriPt代码如表所示。网页0702.htm中实现横向选项K的JaVaSCriPt代码序号程序代码0102030405060708091011121314151617$(document).ready(function()tab();)；functiontabOvar_obj=$(*#buyact*).find(*.tab1i*);/$(_obj).c1ick(function()var_ID=$(_obj).index(this);$(_obj).removeC1assO;$(this).addC1ass(*index*);$(*ftbuyact*).findC.tbodydiv*).removeC1ass0.