Web前端开发任务教程（HTML+CSS+JavaScript+jQuery）全套PPT课件.ppt

支撑知识点一：jQuery实现——基本语法2.教师示范stop()方法停止当前正在运行的动画。语法：$(selector).stop(stopAll,goToEnd)。stop()方法用于停止动画或效果，在它们完成之前。$(#btn).click(function(){ $(#panel).stop(); });支撑知识点一：jQuery实现——基本语法2.教师示范eq()方法将匹配元素集缩减值指定index上的一个。语法：.eq(index)详细说明：如果给定表示DOM元素集合的jQuery对象，.eq()方法会用集合中的一个元素构造一个新的jQuery对象。所使用的index参数标示集合中元素的位置。2.教师示范：显示banner图片实现任务：有哪些信誉好的足球投注网站商品——样式2.教师示范：请查看案例4-2中代码。3.学生设计1、分析任务2、小组讨论3、模范制作4、任务整合课堂模仿制作：4.展示评价学习目标评价项目掌握图片标记实现logo图片的显示掌握图片导航条实现图片导航条掌握滑动门技术实现滑动门导航条1.Logo图片显示2.顶端链接3.图片导航4.滑动门导航任务小结基于工作过程的Web国际标准教程5.知识扩展在本任务中，对于.btn类的定义中相关属性用到*、_等符号，主要作用是便于不同的浏览器识别并应用相关属性设置，使得页面显示基本一致。IE6能识别下划线_和星号*，IE7能识别星号*，但不能识别下划线_，而firefox则均不能识别。1.网站整体布局分析设计2.页面头部具体实现3.导航实现4.滚动图片广告栏实现5.女装、男装产品展示6.品牌、实体店及脚注实现7.页面调试及优化课堂任务学习情境划分的子项目：掌握jQuery基本语法。掌握jQuery实现tab导航条。知识目标任务4-3:目标实现tab导航条图片排版。掌握原生js实现导航条方法。掌握jQuery实现导航条方法。技能目标任务展示与任务目标任务4-3：导航的实现从图可以看出，主要分为两部分，父级导航条和子tab菜单。1.任务分析根据效果图可以看出，导航部分主要由两部分构成，第一部分是主菜单项“首页”、“品牌”、“实体店”等等，第二部分是下方的子菜单项，子菜单项包含各种分类，内容较多。实现整个导航难度主要在于导航样式的控制、子菜单项显示与隐藏，其中还应用到脚本实现动画效果。2.教师示范：显示banner图片实现任务：整体结构显示2.教师示范：实现任务：主菜单结构2.教师示范实现任务：子菜单结构2.教师示范每一个主菜单选项对应到一个子菜单块，因此在子菜单容器navbox中需包含多个子菜单块，基本结构如下：实现任务：子菜单结构2.教师示范实现任务：整体样式2.教师示范整体样式代码过多，需要了解的请查看案例源代码。实现任务：脚本2.教师示范Tab导航条的主要功能为：1、默认子菜单全部隐藏2、当鼠标经过时，显示跟它相对应的div，其他div隐藏3、显示或隐藏有动画效果（jQuery实现）实现任务：脚本实现2.教师示范/*显示函数，鼠标经过时，相对应的div显示，其他div隐藏*/functionshow(id){ vardivItem=document.getElementById(navbox).getElementsByTagName(div); for(vari=0;i7;i++){ if(id==i){ divItem[i].style.display=block; } else{ divItem[i].style.display=none; } } }实现任务：脚本实现2.教师示范/*隐藏函数，鼠标经开时，所有div隐藏*/functionout(){ vardivItem=document.getElementById(navbox).getElementsByTagName(div); for(vari=0;i7;i++){ divItem[i].style.display=none; } }实现任务：脚本实现2.教师示范给原先的a标签和子div都添加上鼠标经过和鼠标移开事件，如：divclass=listid=navlist!--主菜单项--ulid=navfouceliahref=#onmouseover=show(0)o