第十一章 蔚蓝网上书店.pptx

第十一章 蔚蓝网上书店项目案例预习检查集中测试/36实现文本提示特效需要用的技术有哪些？鼠标进入文本框，文本框样式改变需要用到哪些技术？单击某一图片，如图实现网页某元素的显示和隐藏？动态改变网页内容的实现原理是什么？如何实现当鼠标移至图片上时，图片大小和位置发生变化？训练的技能点2-1使用open( )方法弹出页面使用jQuery选择器访问节点使用jQuery 获取页面中的样式属性使用jQuery动态地改变页面元素的样式使用jQuery动态获取或改变页面的内容使用jQuery中的显示隐藏、滑动、动画等实现页面特效/36训练的技能点2-2使用blur( )和focus( )事件方法改变文本框失去焦点和获得焦点时的样式，即时地在层中显示提示内容使用HTML5验证表单内容使用alert( )方法弹出提示信息使用定时函数setTimeout( )方法或setInterval( )方法实现轮换广告和循环滚动效果使用数组和jQuery 动态地创建DOM，实现级联效果/36任务描述系统概述用户可以浏览网站首页，查看图书信息需要实现购物车功能用户可以注册、登录系统角色网站浏览者、注册用户、购书用户提交结果网页文件、样式文件、脚本文件、图片素材演示案例：蔚蓝网上书店/36难点分析1：jQuery中的循环使用数组、循环实现图书分类显示var bookSort=new Array(……"科幻(513)","武侠(574)"……);var html=[ ];$.each(bookSort, function(i, n){ html.push("<li> ·<a href='#' class='blue'>"+n+"</a></li>")});$(“#product_catList_class”).html(html.join(" "));使用each()方法实现循环/36难点分析2：实现“书讯快递”图书滚动效果实现“书讯快递”图书滚动效果实现思路使用animate()方法，动态减小marginTop 属性的值当减小marginTop减小的值达到第一个图书条目的高度时，则将第一个图书条目移动到最后使用setInterval()不断的执行该过程/36项目准备：获取素材并阅读代码6-1该项目素材提供了5个网页蔚蓝网首页图书展示页面购物车页面新用户注册页面用户登录页面/36项目准备：获取素材并阅读代码6-2蔚蓝网首页/36项目准备：获取素材并阅读代码6-3图书展示页面/36项目准备：获取素材并阅读代码6-4购物车页面/36项目准备：获取素材并阅读代码6-5新用户注册页面/36项目准备：获取素材并阅读代码6-6用户登录页面/36开发计划/36用例1：网页特效（首页）4-1指导需求说明打开首页时弹出固定大小的广告页面窗口“新手入门”下拉菜单的自动显示与隐藏随滚动条上下移动的广告图片讲解需求说明完成时间：30分钟/36用例1：网页特效（首页）4-2练习需求说明带数字按钮的循环显示的图片广告书讯快递无缝隙、循环垂直向上滚动讲解需求说明完成时间：20分钟/36用例1：网页特效（首页）4-3练习需求说明电子书特效：鼠标移至图片上时，图片变大，离开图片恢复原来状态TAB切换完成时间：20分钟讲解需求说明/36共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解/36用例1：网页特效（首页）4-4“新手入门”下拉菜单能否自动显示与隐藏打开首页时能否弹出广告页面窗口广告图片能否随滚动条上下移动中间的图片广告能否循环显示“图书畅销榜”内容是否实现tab切换特效书讯快递能否自动垂直向上滚动电子书特效实现图片的大小变化效果要求互相验证完成的程序功能小组长检查本组完成情况演示案例：网页特效（首页）功能测试/36用例2：展示图书内容（图书展示页面）2-1练习需求说明左侧同级分类列表列表模式和大图模式切换列表模式大图模式完成时间：50分钟讲解需求说明/36共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解/36用例2：展示图书内容（图书展示页面）2-2能否自动生成同级分类列表图书信息能否切换到列表模式图书信息能否切换到大图模式要求互相验证完成的程序功能小组长检查本组完成情况演示案例：展示图书内容功能测试/36用例3：管理购物车中的商品（购物车页面）2-1练习需求说明实现商品列表的显示和隐藏对选购的商品实现删除和修改数量自动计算积分、金额完成时间：50分钟讲解需求说明/36共性问题集中讲解常见问题及解决办法代码规范问题调试技巧共性问题集中讲解/36用例3：管理购物车中的商品（购物车页面）2-2商品列表是否实现了显示和隐藏选购的商品能否删除和修改数量能否自动计算积分、金额要求互相验证完成的程序功能小组长检查本组完成情况演示案例：管理购物车中的商品功能测试