day06_Web APIs.ppt

Web APIs 06,昨日复习,Web APIs第06天-昨日复习,获取边框+padding+内容宽度的是_ 获取padding+内容宽度的是_,Web APIs第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 网页轮播图-克隆第一张图片,上午复习,_是深层克隆 _是浅层克隆,Web APIs第06天-上午复习,上午复习,cloneNode(ture)是深层克隆 cloneNode(false)是浅层克隆,Web APIs第06天-上午复习,要点提示,网页轮播图小圆圈跟随右侧按钮一起变化,掌握程度：应用,6.5 网页轮播图小圆圈跟随右侧按钮一起变化,要点提示,网页轮播图-两个小bug解决方案,掌握程度：应用,7.1 网页轮播图-两个小bug解决方案,要点提示,网页轮播图-左侧按钮功能制作,掌握程度：应用,7.2 网页轮播图-左侧按钮功能制作,要点提示,网页轮播图-自动播放功能,掌握程度：应用,7.3 网页轮播图-自动播放功能,要点提示,节流阀以及逻辑中断应用,掌握程度：应用,7.4 节流阀以及逻辑中断应用,防止轮播图按钮连续点击造成播放过快。节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。开始设置一个变量 var flag=true;If(flag)flag=false;do something 关闭水龙头利用回调函数 动画执行完毕，flag=true 打开水龙头,7.4节流阀以及逻辑中断应用,课堂问答,知识总结,