CSS高级特效优秀讲义.pptVIP

第5章　上机 CSS高级特效(一) 作业点评 理论作业　网易邮箱注册表单动态输入提示 效果演示 作业点评 上机作业　列车时刻查询 //车次查询部分 var orders=new Array(); orders[动车组]=[D1,D2,D3,D4]; orders[快车]=[K3,K4,K5,K6]; orders[普车]=[1008/1009,1010/1007,1019]; function showOrder() { var order =document.getElementById(order); var category=document.getElementById(category); order.length=1; for(var key in orders[category.value]) { var op=new Option(); op.text=orders[category.value][key]; op.value=orders[category.value][key]; order.options.add(op); } } 效果演示 上机内容 页面Tab特效的应用 遮罩层特效的应用 上机目标 制作51job校园招聘栏目的搜索版块 制作51job个人加油站版块 阶段1 训练内容 使用getElementById访问页面元素 使用display属性实现页面元素的显示和隐藏 处理鼠标的onmouseover事件和onmouseout事件 需求说明 制作51job校园招聘栏目的搜索版块的Tab切换特效 阶段1 完成时间20分钟 参考代码 实现思路 使用DIV+CSS定义Tab结构的标题、内容及Tab页脚部分 编写Tab样式规则，定义Tab元素的外观 使用脚本处理Tab的onmouseover和onmouseout事件，在鼠标事件中动态设置display属性 div id=searchform1 class=searchlabel style=display: none; div class=labelsearch/div div class=schoolline div class=searchtext/div /div div class=schoolbott/div /div 阶段1 需求说明 练习使用className属性动态切换样式规则 参考代码 完成时间20分钟 阶段1 需求说明 制作个人加油站Tab特效，实现Tab手动切换和系统自动切换特效 参考代码 完成时间25分钟 小结 总结常见问题及解决办法 共性问题集中讲解 阶段2 训练内容 使用getElementById访问页面元素 使用display属性动态显示、隐藏页面元素 使用position:absolute定位元素位置 需求说明 制作51job选择工作地点的遮罩层特效 阶段2 完成时间25分钟 参考代码 实现思路 使用div定义遮罩层，遮罩层的大小要大于等于屏幕的尺寸 使用div定义弹出层，制出弹出层中的工作地点选择列表 遮罩层的z-index属性值小于弹出层的z-index属性值 使用脚本动态设置遮罩层和弹出层的display属性值 阶段2 需求说明 参照指导部分的内容，制作快速搜索Tab的日期选择功能 参考代码 完成时间20分钟 总结 总结并布置作业