Web APIs-day06 day06_Web APIs

WebAPIs06 昨日复习 WebAPIs第06天 昨日复习 获取边框 padding 内容宽度的是 获取padding 内容宽度的是 WebAPIs第06天 昨日复习 昨日复习 获取边框 padding 内容宽度的是offsetWidth获取padding 内容宽度的是clientWidth Contents 目 录 元素偏移量offset系列元素可视区client系列元素滚动scroll系列动画函数封装常见网页特效案例 能够说出常见offset系列属性的作用能够说出常见client系列属性的作用能够说出常见scroll系列属性的作用能够封装简单动画函数能够写出移动端触屏事件 目标 TARGET 要点提示 缓动动画原理 掌握程度 了解 1 1缓动动画原理 如何封装缓动动画 要点提示 缓动动画基本代码实现 掌握程度 应用 2 1缓动动画基本代码实现 缓动动画就是让元素运动速度有所变化 最常见的是让速度慢慢停下来让盒子每次移动的距离慢慢变小 速度就会慢慢落下来 核心算法 目标值 现在的位置 10做为每次移动的距离步长停止的条件是 让当前盒子位置等于目标位置就停止定时器注意步长值需要取整 2 2缓动动画基本代码实现 课堂问答 知识总结 如何判断step是正直还是负值 要点提示 缓动动画多个目标值之间移动 掌握程度 应用 3 1缓动动画多个目标值之间移动 什么叫做回调函数 要点提示 缓动动画添加回调函数 掌握程度 应用 3 2缓动动画添加回调函数 回调函数原理 函数可以作为一个参数 将这个函数作为参数传到另一个函数里面 当那个函数执行完之后 再执行传进去的这个函数 这个过程就叫做回调 3 3缓动动画添加回调函数 课堂问答 知识总结 回调函数的使用场景 要点提示 动画函数的使用 掌握程度 应用 4 1动画函数的使用 要点提示 网页轮播图 结构搭建 掌握程度 应用 5 1网页轮播图 结构搭建 要点提示 网页轮播图 鼠标经过显示隐藏左右按钮 掌握程度 应用 5 2网页轮播图 鼠标经过显示隐藏左右按钮 因为js较多 我们单独新建js文件夹 再新建js文件 引入页面中 此时需要添加load事件 鼠标经过轮播图模块 左右按钮显示 离开隐藏左右按钮 显示隐藏display按钮 5 3网页轮播图 鼠标经过显示隐藏左右按钮 课堂问答 知识总结 要点提示 网页轮播图 动态生成小圆圈 掌握程度 应用 5 4网页轮播图 动态生成小圆圈 排他思想原理是什么 要点提示 网页轮播图 小圆圈排他思想 掌握程度 应用 6 1网页轮播图 小圆圈排他思想 动态生成小圆圈核心思路 小圆圈的个数要跟图片张数一致所以首先先得到ul里面图片的张数 图片放入li里面 所以就是li的个数 利用循环动态生成小圆圈 这个小圆圈要放入ol里面 创建节点createElement li 插入节点ol appendChild li 第一个小圆圈需要添加current类 6 1网页轮播图 小圆圈排他思想 课堂问答 知识总结 要点提示 网页轮播图 点击小圆圈滚动图片 掌握程度 应用 6 2网页轮播图 点击小圆圈滚动图片 点击小圆圈滚动图片此时用到animate动画函数 将js文件引入 注意 因为index js依赖animate js所以 animate js要写到index js上面 使用动画函数的前提 该元素必须有定位注意是ul移动而不是小li滚动图片的核心算法 点击某个小圆圈 就让图片滚动小圆圈的索引号乘以图片的宽度做为ul移动距离此时需要知道小圆圈的索引号 我们可以在生成小圆圈的时候 给它设置一个自定义属性 点击的时候获取这个自定义属性即可 6 2网页轮播图 点击小圆圈滚动图片 课堂问答 知识总结 要点提示 网页轮播图 右侧按钮无缝滚动 掌握程度 应用 6 3网页轮播图 右侧按钮无缝滚动 点击右侧按钮一次 就让图片滚动一张 声明一个变量num 点击一次 自增1 让这个变量乘以图片宽度 就是ul的滚动距离 图片无缝滚动原理把ul第一个li复制一份 放到ul的最后面当图片滚动到克隆的最后一张图片时 让ul快速的 不做动画的跳到最左侧 left为0同时num赋值为0 可以从新开始滚动图片了 6 3网页轮播图 右侧按钮无缝滚动 课堂问答 知识总结 如何克隆元素 什么叫深层克隆 什么叫浅层克隆 要点提示 网页轮播图 克隆第一张图片 掌握程度 应用 6 4网页轮播图 克隆第一张图片 上午复习 是深层克隆 是浅层克隆 WebAPIs第06天 上午复习 上午复习 cloneNode ture 是深层克隆cloneNode false 是浅层克隆 WebAPIs第06天 上午复习 要点提示 网页轮播图小圆圈跟随右侧按钮一起变化 掌握程度 应用 6 5网页轮播图小圆圈跟随右侧按钮一起变化 要点提示 网页轮播图 两个小bug解决方案 掌握程度 应用 7 1网页轮播图 两个小bug解决方案 要点提示 网页轮播图 左侧按钮功能制作 掌握程度 应用 7 2网页轮播图 左侧按钮功能制作 要点提示 网页轮播图 自动播放功能 掌握程度 应用 7 3网页轮播图 自动播放功能 要点提示 节流阀以及逻辑中断应用 掌握程度 应用 7 4节流阀以及逻辑中断应用 防止轮播图按钮连续点击造成播放过快 节流阀目的 当上一个函数动画内容执行完毕 再去执行下一个函数动画 让事件无法连续触发 核心实现思路 利用回调函数 添加一个变量来控制 锁住函数和解锁函数 开始设置一个变量varflag true If flag flag false dosomething 关闭水龙头利用回调函数动画执行完毕 flag true打开水龙头 7 4节流阀以及逻辑中断应用 课堂问答 知识总结 如何获取页面滚动了多少 要点提示 带有动画的返回顶部 掌握程度 应用 8 1带有动画的返回顶部 带有动画的返回顶部此时可以继续使用我们封装的动画函数只需要把所有的left相关的值改为跟页面垂直滚动距离相关就可以了页面滚动了多少 可以通过window pageYOffset得到最后是页面滚动 使用window scroll x y 8 1带有动画的返回顶部 课堂问答 知识总结 要点提示 筋斗云案例 掌握程度 应用 8 2筋斗云案例 利用动画函数做动画效果原先筋斗云的起始位置是0鼠标经过某个小li 把当前小li的offsetLeft位置做为目标值即可鼠标离开某个小li 就把目标值设为0如果点击了某个小li 就把li当前的位置存储起来 做为筋斗云的起始位置 8 2筋斗云案例 课堂问答 知识总结 要点提示 移动端网页特效导读 掌握程度 应用 8 3移动端网页特效导读 什么是touchstart事件什么是touchmove事件什么是touchend事件 要点提示 移动端touch触摸事件 掌握程度 应用 8 4移动端touch触摸事件 touchstart 手指触摸dom元素touchmove 手指在dom元素上移动touchend 手指离开dom元素 8 4移动端touch触摸事件 课堂问答 知识总结 touches targetTouches changedTouches的区别 要点提示 移动端TouchEvent触摸事件对象 掌握程度 应用 9 1移动端TouchEvent触摸事件对象