day07_Web APIs.ppt

Web APIs 07,昨日复习,Web APIs第07天-昨日复习,把函数当做参数传递进去的那个函数称之为_ targetTouches获取到的是_,Web APIs第07天-昨日复习,昨日复习,把函数当做参数传递进去的那个函数称之为回调函数 targetTouches获取到的是当前触发dom元素的手指列表,Contents,目,录,触屏事件移动端常见特效移动端常用开发插件移动端常用开发框架本地存储,能够写出移动端触屏事件 能够写出常见的移动端特效 能够使用移动端开发插件开发移动端特效 能够使用移动端开发框架开发移动端特效 能够写出 sessionStorage 数据的存储以及获取 能够写出 localStorage 数据的存储以及获取 能够说出它们两者的区别,目标,TARGET,复习轮播图小圆点的制作,要点提示,移动端轮播图-结构搭建,掌握程度：了解,1.1移动端轮播图-结构搭建,会布局移动端的轮播图结构,要点提示,移动端轮播图-布局分析,掌握程度：应用,2.1移动端轮播图-布局分析,一定要注意移动端的轮播图在布局的时候前后各要加一张图片注意移动端我们使用的百分比布局,所以在分布百分比时,要注意计算,2.2移动端轮播图-布局分析,课堂问答,知识总结,如何用CSS3制作轮播图,要点提示,移动端轮播图-滚动图片,掌握程度：应用,3.1 移动端轮播图-滚动图片,监听过渡完成的事件是什么,要点提示,移动端轮播图-无缝滚动,掌握程度：应用,3.2 移动端轮播图-无缝滚动,注意，我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断此时需要添加检测过渡完成事件 transitionend 判断条件：如果索引号等于 3 说明走到最后一张图片，此时 索引号要复原为 0此时图片，去掉过渡效果，然后移动如果索引号小于0，说明是倒着走，索引号等于2 此时图片，去掉过渡效果，然后移动,3.3 移动端轮播图-无缝滚动,课堂问答,知识总结,如何使用classList添加类名如何使用classList删除类名如何使用classList切换类名,要点提示,classList类名操作,掌握程度：应用,4.1 classList类名操作,添加类名:element.classList.add（类名）；删除类名:element.classList.remove（类名）;切换类名:element.classList.toggle（类名）；,4.2 classList类名操作,课堂问答,知识总结,用classList还需不需要循环遍历每个小圆点?,要点提示,移动端轮播图-小圆点跟随变化,掌握程度：应用,5.1 移动端轮播图-小圆点跟随变化,小圆点跟随变化效果把ol里面li带有current类名的选出来去掉类名 remove让当前索引号 的小li 加上 current add但是，是等着过渡结束之后变化，所以这个写到 transitionend 事件里面,5.2移动端轮播图-小圆点跟随变化,课堂问答,知识总结,如何记录手指点击的初始坐标?如何获取手指移动的距离?,要点提示,移动端轮播图-手指拖动轮播图,掌握程度：应用,6.1 移动端轮播图-手指拖动轮播图,如何判断是否滑动到上一张还是下一张图片?,要点提示,移动端轮播图-手指滑动播放上一张下一张图片,掌握程度：应用,6.2 08-移动端轮播图-手指滑动播放上一张下一张图片,要点提示,移动端轮播图-回弹效果,掌握程度：应用,6.3 移动端轮播图-回弹效果,手指滑动轮播图本质就是ul跟随手指移动，简单说就是移动端拖动元素触摸元素 touchstart：获取手指初始坐标移动手指 touchmove：计算手指的滑动距离，并且移动盒子离开手指 touchend:根据滑动的距离分不同的情况如果移动距离小于 某个像素 就回弹原来位置如果移动距离大于某个像素就上一张下一张滑动。滑动也分为左滑动和右滑动 判断的标准是 移动距离正负 如果是负值就是左滑 反之右滑 如果是左滑 就播放下一张（index+）如果是右滑 就播放上一张(index-),6.4 移动端轮播图-回弹效果,课堂问答,知识总结,是否还记得返回顶部的代码?,要点提示,返回顶部模块制作,掌握程度：应用,7.1 返回顶部模块制作,300ms的延迟怎么来的如何解决,要点提示,移动端click事件300ms延时问题解决方案,掌握程度：了解,8.1 移动端click事件300ms延时问题解决方案,知道如何使用fastclick插件,要点提示,fastclick插件使用,掌握程度：了解,8.2 fastclick插件使用,1.禁用缩放。浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟。2.利用touch事件自己封装这个事件解决 300ms 延迟。3.使用插件。fastclick 插件解决 300ms 延迟。,8.3 fastclick插件使用,课堂问答,知识总结,引入swiper时,注意引入顺序,要点提示,swiper插件使用-引入相关文件,掌握程度：应用,9.1 swiper插件使用-引入相关文件,上午复习,用classList添加类名是件系统 用classList删除类名是件系统 用classList切换类名是件系统,Web APIs第07天-上午复习,上午复习,用classList添加类名是:element.classList.add 用classList删除类名是element.classList.remove 用classList切换类名是element.classList.toggle,Web APIs第07天-上午复习,如何复制代码到自己的代码中,要点提示,移动端轮播图-按照语法规范使用,掌握程度：应用,10.1 移动端轮播图-按照语法规范使用,知道如何查看手册,要点提示,swiper插件使用-参数更改,掌握程度：应用,11.1 swiper插件使用-参数更改,要点提示,移动端其他插件以及使用总结,掌握程度：了解,11.2 移动端其他插件以及使用总结,知道如何引用zy.media.js文件,要点提示,视频插件zy.media.js的使用,掌握程度：了解,12.1 视频插件zy.media.js的使用,