前端-03javascript网页编程07-1002webapi dayweb apis

WebAPIs07昨日复习WebAPIs第07天-昨日复习把函数当做参数传递进去的那个函数称之为______targetTouches获取到的是______WebAPIs第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.1classList类名操作视结添加类名:element.classList.add（’类名’）；删除类名:element.classList.remove（’类名’）;切换类名:element.classList.toggle（’类名’）；4.2classList类名操作课堂问答视知识总结结用classList还需不需要循环遍历每个小圆点?要点提示移动端轮播图-小圆点跟随变化掌握程度：应用5.1移动端轮播图-小圆点跟随变化结视小圆点跟随变化效果把ol里面li带有current类名的选出来去掉类名remove让当前索引号的小li加上currentadd但是，是等着过渡结束之后变化，所以这个写到transitionend事件里面5.2移动端轮播图-小圆点跟随变化课堂问答视知识总结结如何记录手指点击的初始坐标?如何获取手指移动的距离?要点提示移动端轮播图-手指拖动轮播图掌握程度：应用6.1移动端轮播图-手指拖动轮播图演视如何判断是否滑动到上一张还是下一张图片?要点提示移动端轮播图-手指滑动播放上一张下一张图片掌握程度：应用6.208-移动端轮播图-手指滑动播放上一张下一张图片演视要点提示移动端轮播图-回弹效果掌握程度：应用6.3移动端轮播图-回弹效果演视手指滑动轮播图本质就是ul跟随手指移动，简单说就是移动端拖动元素触摸元素touchstart：获取手指初始坐标移动手指touchmove：计算手指的滑动距离，并且移动盒子离开手指touchend:根据滑动的距离分不同的情况如果移动距离小于某个像素就回弹原来位置如果移动距离大于某个像素就上一张下一张滑动。滑动也分为左滑动和右滑动判断的标准是移动距离正负如果是负值就是左滑反之右滑如果是左滑就播放下一张（index++）如果是右滑就播放上一张(index--)6.4移动端轮播图-回弹效果课堂问答视知识总结演是否还记得返回顶部的代码?要点提示返回顶部模块制作掌握程度：应用7.1返回顶部模块制作视300ms的延迟怎么来的如何解决要点提示移动端click事件300ms延时问题解决方案掌握程度：了解8.1移动端click事件300ms延时问题解决方案结视知道如何使用fastclick插件要点提示fastclick插件使用掌握程度：了解8.2fastclick插件使用结视1.禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。<metaname="viewport"content="user-scalable=no">2.利用touch事件自己封装这个事件解决300ms延迟。3.使用插件。fastclick插件解决300ms延迟。8.3fastclick插件使用课堂问答视知识总结结引入swiper时,注意引入顺序要点提示swiper插件使用-引入相关文件掌握程度：应用9.1swiper插件使用-引入相关文件视上午复习

用classList添加类名是件系统用classList删除类名是件系统用classList切换类名是件系统WebAPIs第07天-上午复习上午复习用classList添加类名是:element.classList.add

用classList删除类名是element.classList.remove用classList切换类名是element.classList.toggleWebAPIs第07天-上午复习如何复制代码到自己的代码中要点提示移动端轮播图-按照语法规范使用掌握程度：应用10.1移动端轮播图-按照语法规范使用视知道如何查看手册要点提示swiper插件使用-参数更改掌握程度：应用11.1swiper插件使用-参数更改视要点提示移动端其他插件以及使用总结掌握程度：了解11.2移动端其他插件以及使用总结视知道如何引用zy.media.js文件要点提示视频插件zy.media.js的使用掌握程度：了解12.1视频插件zy.media.js的使用结视如何使用bootstrap框架要点提示bootstrap轮播图掌握程度：应用13.1bootstrap轮播图结视要点提示19-阿里百秀轮播图制作掌握程度：应用13.2阿里百秀轮播图制作结视Bootstrap是一个简洁、直观、强悍的前端开发框架，它让web开发更迅速、简单。它能开发PC端，也能开发移动端BootstrapJS插件使用步骤：引入相关js文件复制HTML结构修改对应样式修改相应JS参数13.2阿里百秀轮播图制作课堂问答视知识总结结要点提示本地存储导读掌握程度：了解14.1本地存储导读视sessionStorage的生命周期是多少?如何获取数据,储存数据,删除数据,清空数据要点提示本地存储之sessionStorage掌握程度：了解14.2本地存储之sessionStorage结视localStorage的生命周期是多少?如何获取数据,储存数据,删除数据,清空数据要点提示本地存储之localStorage掌握程度：应用14.3本地存储之localStorage结视要点提示记住用户名案例掌握程度：应用14.4记住用户名案例结视练习动动手，练一下这个记住用户名案例吧！提示1、先判断是否有这个数据2、在通过localStorage储存数据10分钟15.1记住用户名案例记住用户名案例练习视