用户交互设计与实现

夏正伟

目录

  • 1 课程简介
    • 1.1 为何要学习前端开发
    • 1.2 前端学习路线
    • 1.3 课程教案
    • 1.4 课程教学日历
    • 1.5 【课堂讨论】答疑解惑
    • 1.6 线上教学示范
    • 1.7 线上线下教学示范
  • 2 JavaScript概述
    • 2.1 本课我要学什么
    • 2.2 任务1.1 认识JavaScript
    • 2.3 开发工具的安装
    • 2.4 任务1.2 在页面显示个人信息
    • 2.5 任务1.3 测试综合案例在主流浏览器上的兼容性
    • 2.6 第1章节测验
    • 2.7 主题讨论
  • 3 JavaScript基础
    • 3.1 本课我要学什么
    • 3.2 任务2.1 显示变量数据类型
    • 3.3 任务2.2 根据成绩给出学生考评
    • 3.4 任务2.3 实现猜数游戏
    • 3.5 任务2.4 制作简易计算器
    • 3.6 第2章节测验
    • 3.7 主题讨论
  • 4 JavaScript对象编程
    • 4.1 本课我要学什么
    • 4.2 任务3.1 在页面动态显示系统时间
    • 4.3 任务3.2 制作随机选号器
    • 4.4 任务3.3 制作简单的焦点图效果
    • 4.5 任务3.4 使用JSON方式显示图书信息
    • 4.6 任务3.5 验证注册页面信息
    • 4.7 任务3.6 使用正则表达式验证注册页面信息
    • 4.8 第3章节测验
    • 4.9 主题讨论
  • 5 BOM编程
    • 5.1 本课我要学什么
    • 5.2 任务4.1 制作弹窗效果
    • 5.3 任务4.2 制作网页标题交替显示效果
    • 5.4 任务4.3 制作复选框全选效果
    • 5.5 第4章节测验
    • 5.6 主题讨论
  • 6 DOM编程
    • 6.1 本课我要学什么
    • 6.2 任务5.1  Core DOM方式动态添加表格 Core DOM方式动态添加表格
    • 6.3 任务5.2 使用HTML DOM方式动态添加表格
    • 6.4 第5章节测验
    • 6.5 主题讨论
  • 7 JavaScript与CSS交互
    • 7.1 本课我要学什么
    • 7.2 任务6.1 JavaScript动态改变导航菜单样式
    • 7.3 任务6.2 制作图片轮显效果
    • 7.4 任务6.3 制作随鼠标滚动的广告图片
    • 7.5 第6章节测试
    • 7.6 主题讨论
  • 8 jQuery基础
    • 8.1 线上学习引导文-交互特效1
    • 8.2 本课我要学什么
    • 8.3 课前测试
    • 8.4 任务7.1 JQuery基础
    • 8.5 课堂闯关游戏
    • 8.6 任务7.2 列表的显示与收起
    • 8.7 第7章节测试
    • 8.8 主题讨论
  • 9 jQuery中的DOM操作
    • 9.1 线上学习引导文-交互特效2、3
    • 9.2 本课我要学什么
    • 9.3 课前测试
    • 9.4 任务8.1  制作图片展示效果
    • 9.5 任务8.2 制作留言板前端局部更新效果
    • 9.6 课堂闯关游戏
    • 9.7 任务8.3 制作电子邮件删除效果
    • 9.8 第8章节测试
    • 9.9 主题讨论
  • 10 jQuery中的事件
    • 10.1 线上学习引导文-交互特效4、5
    • 10.2 本课我要学什么
    • 10.3 课前测试
    • 10.4 任务9.1 微博字数统计
    • 10.5 课堂闯关游戏
    • 10.6 任务9.2 制作图片提示效果
    • 10.7 课前测试
    • 10.8 任务9.3 制作横向导航菜单
    • 10.9 课堂闯关游戏
    • 10.10 第9章节测试
    • 10.11 主题讨论
  • 11 jQuery制作动画
    • 11.1 线上学习引导文-交互特效6、7
    • 11.2 本课我要学什么
    • 11.3 课前测试
    • 11.4 课堂闯关游戏
    • 11.5 任务10.1 FAQ答案的显示和隐藏
    • 11.6 课前测试
    • 11.7 课堂闯关游戏
    • 11.8 任务10.2 制作图片横向移动效果
      • 11.8.1 主题讨论
      • 11.8.2 第10章节测试
  • 12 jQuery插件应用
    • 12.1 线上学习引导文-交互特效8
    • 12.2 本课我要学什么
    • 12.3 课前测试
    • 12.4 任务11.1 使用ss-Menu固定侧边栏插件
    • 12.5 任务11.2 Pinterest Grid实现响应式网格瀑布流布局
    • 12.6 任务11.3 编写表格隔行变色插件
    • 12.7 主题讨论
  • 13 拓展：Bootstrap（网络资源）
    • 13.1 第1集 BootStrap安装和栅格系统
    • 13.2 第2集 BootStrap排版样式
    • 13.3 第3集 BootStrap代码、表格和表单样式
    • 13.4 第4集 BootStrap表单样式
    • 13.5 第5集 BootStrap按钮、图片、工具和响应式工具
    • 13.6 第6集 BootStrap Glyphicons图标、下拉菜单、按钮组和按钮式下拉菜单
    • 13.7 第7集 BootStrap输入框组和导航
    • 13.8 第8集 BootStrap导航条
    • 13.9 第9集 BootStrap面包屑导航、分页、标签、徽章、大屏幕显示、页面标题和缩略图
  • 14 1+X Web前端开发考证
    • 14.1 Web前端开发1+X职业技术等级证书的学习目标和学习线路图
    • 14.2 JavaScript专项练习1
    • 14.3 JavaScript专项练习2
    • 14.4 jQuery专项练习1
    • 14.5 jQuery专项练习2
    • 14.6 jQuery专项练习3
    • 14.7 jQuery专项练习4
本课我要学什么

第10章 jQuery制作动画

【本课知识点】

  1. 灵活使用显示与隐藏的相关动画方法

  2. 能够使用animate()方法自定义动画效果

  3. 理解动画队列和回调函数

  4. 学会使用stop()方法和判断元素是否处于动画状态

【教学目标】
知识目标

  1. 了解显示隐藏动画的类型

  2. 理解显示隐藏原理

  3. 理解图片轮播原理

  4. 掌握animate方法

  5. 理解动画队列

能力目标

  1. 会使用显示隐藏动画

  2. 会使用animate方法

  3. 会设置animate参数

  4. 能实现图片横向移动的幻灯片效果

素质目标

  1. 培养学生独立分析解决问题的能力

  2. 提高自主探究学习能力

  3. 培养学生勤实践，热爱劳动，精益求精的工匠精神

【重难点】
重点

  1. 能使用显示隐藏动画实现选项卡效果

  2. 能够使用animate()方法自定义动画效果

  3. 理解动画队列和回调函数

难点

  1. 能使用显示隐藏动画实现选项卡效果

  2. 能够使用animate()方法自定义动画效果

  3. 理解动画队列和回调函数

【课堂任务】

任务1：FAQ答案的显示与隐藏

任务2：图片横向移动效果

【知识思维导图】