《HTML5+CSS3响应式Web开发》课件——1.模块实训-实现详情页动画效果.pptxVIP

模块实训-实现详情页动画效果

任务导入本单元前几节重点讲解了CSS3过渡、Javascript等。为了同学们能够更好地认识css高级属性，下面将通过任务的形式，完成综合项目首页中的“商品详情”部分，如下图所示。当鼠标划过小图片时

任务分析本任务需要用到本单元所学的CSS3过渡、Javascript等知识。1.HTML部分：整个页面使用div划分结构，canvas元素放置大图片，ul-li放置小图片等；2.CSS部分：清除浏览器样式、清除浮动、定义canvas等；3.Javascript部分：创建画布、画笔并绘制图像。

任务实施关键html、CSS代码如下：

任务实施关键Javascript代码如下：