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

单元8设计内容展开与折叠类网页特效课程名称JaVaSCriPt+jQuery网页特效设计单元名称设计内容展开与折叠类网页特效教学内容设计内容展开与折叠类网页特效课时6项目性质口演示性口验证性口设计性J综合性授课班级授课日期授课地点教学目标学会设计内容展开与折叠类网页特效熟悉BOM（浏览器对象模型），掌握浏览器对象模型的层次结构重点掌握Window对象、document对象及其属性和方法一般掌握SCreen对象、IoCatiOn对象、history对象和navigator对象等浏览器对象及其属性和方法熟悉jQucr的尺寸方法教学难点WindOw对象、documen1对象及其属性和方法教学方法任务驱动法、分组讨论法、探究学习法教学准备计算机、多媒体教学设备教学课件PPT教材：JavaScript+jQue”网页特效设计任务驱动教程（第2版）作业设计教材P238自主训练教学过程教学环节教学内容与过程(教学内容、教学方法、组织形式、教学手段)课前组织做好上课前的各项准备工作(打开计算机、打开课件、打开软件、打开授课计划、教案等)，吸引学生注意力。课程说明从特效欣赏“应用jQucry的each。和hasC1ass()等方法设计网页内容折叠与展开特效”引入教学内容。【特效赏析】任务87应用jQuery的each。和hasC1ass()等方法设计网页内容折叠与展开特效网页0801htm1中可折叠与展开的网页内容如图所示，单击按钮，即可折叠网页内容，单击按钮，即可展开网页内容。所"英目所有类目入BU.8)1CUHC9)+图书Hgm阿-电子书U(1)÷电子书«««»*(»网页0801.htm1中可折叠与展开的网页内容网页0801htm1中网页内容的折叠与展开效果网页0801h1m1中主要应用的CSS代码如表所示。网页0801.htm冲主要应用的CSS代码课程内容序号程序代码描述010203040506070809101112131415161718192021#refi1terwidth:207px;border:2pxso1id#ddd;)Srefi1ter.itembackground:#fff;position:re1ative)#refi1ter.itemh3border-top:#cccIpxdotted;background:#fafafa;overf1ow:hidden;cursor:pointer;1ine-height:24px;height:24px;padding:3px6px3px36px;)#refi1ter.itembbackground:22ur1(imagessearch1.jpg)no-23repeat24background-position:-78px-339px;2526#refi1ter.itemb27margin-top:Ipx;281eft:IOpx：overf1ow:29hidden;width:16px;30cursor:pointer;31position:abso1ute;32top:7px:33height:16px3435Srefi1ter.itemu136border-top:Ipxdotted#ccc;37disp1ay:none;38overf1ow:39hidden;zoom:1;40padding:4pxOpx4px18px;-11)42ftrefi1ter.hoverb43background-position:-6Ipx-339px444546#reii1ter.hoveru147disp1ay:b1ock48网页()801htm1中折叠与展开网页内容对应的HTM1代码如表所示。网页0801.htm1中折叠与展开网页内容对应的HTM1代码序号程序代码01<divc1ass=*wmain*>02<divCIaSS="1eft")03<divc1ass=*m*id="refi1ter”>04<divc1ass=*mt*>05<h2>所有类目<h2>06<div>07<divCIaSS="mc”>08<divC1aSS="itemforehover*>09<h3><b><b>图书<span>(28)<span><h3>10<u1>11<1i><s><s>教材教辅<span>(19)<span><1i>12<1i><s><s>计算机与互联网<span>(6)<span><1i>13<1i><sc1ass=*tree-1ast*></s>艺术<span>(1)<span><1i>14<u1>15<div>16<divCIaSS="item"17<h3><b><b>电子书<span>(1)<span><h3>18<u1>19<1i><sc1ass=*tree-1ast*><s>教材教辅<span>(1)<span><1i>20<1>21<div>22<div>23<div>24<div>25<div>网页()801htm1中实现折叠与展开网页内容特效的JaVaSeriPt代码如表所示。网页0801.htm1中实现折叠IJ展开网页内容特效的JaVaSCriPt代码序号程序代码010203040506070809101112<scripttype=*text/javascript*>$(*#refi1ter.itemh3*).each(function()$(this).c1ick(functionOvare=S(this).parent();if(e.hasC1ass("hover")e.removeC1ass("hover")e1see.addC1ass(*hover*)；<script>任务8-2应用jQuery的togg1e。和css()等方法实现网页内容多层折叠与展开特效网页0802.htm1中商品类型的初始状态如图8-3所示。单击“展开”超链接，展开商品类型的第一层，如图所示。全3帽受护肽伤32)彩板(90)香水(72)洗j睁体(55)美发护发(22)另土护理00)噩油劳疗1美容工具-展开眄网页0802.htm1中商品类型的初始状态全一实护肤心义)彩枚(SO)*水口2)洗浴护体(55)美发护装北)男土护JIGO)见油芳行。SI'7)收起按和*；»逵i®玫琳撕欧案没笑宝道通臭8»的三袋美作小修(遗口)TKIFCBS»r谈西衅侬KI1(FCoD裳芭拉查名妓分类簿逵全部彩妆套装S8MS面部校容眼雷收容访届部职理即3羯事护法套装化板水稻华洁面JM面值/面路接功效补«»美容弄旗像漫外水理层活活愫密卷；3#化持壬V1后修护清挠Ui定美白法做袋假IiA那层修复££$18«IS亮技色展开商品类型的第一层单击“展开更多''超链接，展开每一种商品分类的全部内容，如图所示。,嘴底展开更多主AM®Ai/二)皆水娟ItmN)勇士Y川Mfrrsx>)收起KAtftRPMH&要ItsnI1A*iaH8外NK道口mFM1SWF查名fM火方鸟代配更名AUiecowSnrTg牵*丝茅金分等“丝随夕国芟ttCt大ffiS或分及律逸XS电金正裳依e而面0>a酸稣wFRB*化攻水华法面Wtt面/眺修9%&9U?».«*ra秀大痛信号宣葬炉必收"FRXM籁功侬逸父女Wk1但*外次fitH侬宓M冷化身Iii后修炉席交幡定共。出B依KMR例W复田2电排完佚色'玄史三我烹黄色不鲂*IS展修复Hi«S»爱期电修MMWS碗毛孔««率脚臭乳加修复收旗展开每一种商品分类的全部内容网页0802.htm1中多层折叠与展开网页内容对应的HTM1代码如表所示。网页0802.htm1中多层折段与展开网页内容对应的HTM1代码序号程序代码O102030405060708091011121314<divid=wz_index_201208*><divc1ass=*z_product_nav*>< aC1aSS="qubu"href="">全部特卖<a>< ac1ass=*href="">护肤<span>(632)</span><a>< ac1ass=""href="">彩妆<span>(90)<span><a>< ac1ass=*href="">香水<span>(72)<span><a>< ac1ass=""href="">洗浴护体<span>(55)</span><a>< ac1ass=*href="”>美发护发<span>(22)</span><a>< ac1ass=""href="”>男士护理<span>(30)</span><a>< ac1ass=*href="">精油芳疗<span>(2)<span><a>< ac1ass=*href="”美容工具<san>(7)</san><a>< -当是全部时，显示“展开>< ac1ass=*zhankai*id="aren1FiIierRicker"c1ick=*showMore(this,su1i7i1ter1ist,)*href=*javascript:void(0)”>展开<a>1516171819202122232425262728293031323334353637383940414243444546474849505152535455<div><divc1ass=*c1ear*><div><divc1ass=*z_productnavopen*id=*subFiIter1ist*sty1e=*disp1ay:none;“<!一品牌筛选一<divc1ass=*nav_open*><pc1ass=*navopen_tit*Xac1ass=*nav_open_tit1*>按品牌筛选<a><ac1ass=*nav_open_tit2*href=*>全部<a><p><pc1ass=*nav_open_con*><ac1as