前端-03javascript網(wǎng)頁編程07-1002webapi dayweb apis

WebAPIs07昨日復(fù)習(xí)WebAPIs第07天-昨日復(fù)習(xí)把函數(shù)當(dāng)做參數(shù)傳遞進(jìn)去的那個(gè)函數(shù)稱之為______targetTouches獲取到的是______WebAPIs第07天-昨日復(fù)習(xí)昨日復(fù)習(xí)把函數(shù)當(dāng)做參數(shù)傳遞進(jìn)去的那個(gè)函數(shù)稱之為回調(diào)函數(shù)targetTouches獲取到的是當(dāng)前觸發(fā)dom元素的手指列表Contents目錄觸屏事件移動端常見特效移動端常用開發(fā)插件移動端常用開發(fā)框架本地存儲能夠?qū)懗鲆苿佣擞|屏事件能夠?qū)懗龀Ｒ姷囊苿佣颂匦?/p>

能夠使用移動端開發(fā)插件開發(fā)移動端特效能夠使用移動端開發(fā)框架開發(fā)移動端特效

能夠?qū)懗鰏essionStorage數(shù)據(jù)的存儲以及獲取能夠?qū)懗鰈ocalStorage

數(shù)據(jù)的存儲以及獲取能夠說出它們兩者的區(qū)別目標(biāo)TARGET復(fù)習(xí)輪播圖小圓點(diǎn)的制作要點(diǎn)提示移動端輪播圖-結(jié)構(gòu)搭建掌握程度：了解1.1移動端輪播圖-結(jié)構(gòu)搭建視會布局移動端的輪播圖結(jié)構(gòu)要點(diǎn)提示移動端輪播圖-布局分析掌握程度：應(yīng)用2.1移動端輪播圖-布局分析結(jié)視一定要注意移動端的輪播圖在布局的時(shí)候前后各要加一張圖片注意移動端我們使用的百分比布局,所以在分布百分比時(shí),要注意計(jì)算2.2移動端輪播圖-布局分析課堂問答視知識總結(jié)結(jié)如何用CSS3制作輪播圖要點(diǎn)提示移動端輪播圖-滾動圖片掌握程度：應(yīng)用3.1移動端輪播圖-滾動圖片結(jié)視監(jiān)聽過渡完成的事件是什么要點(diǎn)提示移動端輪播圖-無縫滾動掌握程度：應(yīng)用3.2移動端輪播圖-無縫滾動結(jié)視注意，我們判斷條件是要等到圖片滾動完畢再去判斷，就是過渡完成后判斷此時(shí)需要添加檢測過渡完成事件transitionend判斷條件：如果索引號等于3說明走到最后一張圖片，此時(shí)索引號要復(fù)原為0此時(shí)圖片，去掉過渡效果，然后移動如果索引號小于0，說明是倒著走，索引號等于2此時(shí)圖片，去掉過渡效果，然后移動3.3移動端輪播圖-無縫滾動課堂問答視知識總結(jié)結(jié)如何使用classList添加類名如何使用classList刪除類名如何使用classList切換類名要點(diǎn)提示classList類名操作掌握程度：應(yīng)用4.1classList類名操作視結(jié)添加類名:element.classList.add（’類名’）；刪除類名:element.classList.remove（’類名’）;切換類名:element.classList.toggle（’類名’）；4.2classList類名操作課堂問答視知識總結(jié)結(jié)用classList還需不需要循環(huán)遍歷每個(gè)小圓點(diǎn)?要點(diǎn)提示移動端輪播圖-小圓點(diǎn)跟隨變化掌握程度：應(yīng)用5.1移動端輪播圖-小圓點(diǎn)跟隨變化結(jié)視小圓點(diǎn)跟隨變化效果把ol里面li帶有current類名的選出來去掉類名remove讓當(dāng)前索引號的小li加上currentadd但是，是等著過渡結(jié)束之后變化，所以這個(gè)寫到transitionend事件里面5.2移動端輪播圖-小圓點(diǎn)跟隨變化課堂問答視知識總結(jié)結(jié)如何記錄手指點(diǎn)擊的初始坐標(biāo)?如何獲取手指移動的距離?要點(diǎn)提示移動端輪播圖-手指拖動輪播圖掌握程度：應(yīng)用6.1移動端輪播圖-手指拖動輪播圖演視如何判斷是否滑動到上一張還是下一張圖片?要點(diǎn)提示移動端輪播圖-手指滑動播放上一張下一張圖片掌握程度：應(yīng)用6.208-移動端輪播圖-手指滑動播放上一張下一張圖片演視要點(diǎn)提示移動端輪播圖-回彈效果掌握程度：應(yīng)用6.3移動端輪播圖-回彈效果演視手指滑動輪播圖本質(zhì)就是ul跟隨手指移動，簡單說就是移動端拖動元素觸摸元素touchstart：獲取手指初始坐標(biāo)移動手指touchmove：計(jì)算手指的滑動距離，并且移動盒子離開手指touchend:根據(jù)滑動的距離分不同的情況如果移動距離小于某個(gè)像素就回彈原來位置如果移動距離大于某個(gè)像素就上一張下一張滑動?；瑒右卜譃樽蠡瑒雍陀一瑒优袛嗟臉?biāo)準(zhǔn)是移動距離正負(fù)如果是負(fù)值就是左滑反之右滑如果是左滑就播放下一張（index++）如果是右滑就播放上一張(index--)6.4移動端輪播圖-回彈效果課堂問答視知識總結(jié)演是否還記得返回頂部的代碼?要點(diǎn)提示返回頂部模塊制作掌握程度：應(yīng)用7.1返回頂部模塊制作視300ms的延遲怎么來的如何解決要點(diǎn)提示移動端click事件300ms延時(shí)問題解決方案掌握程度：了解8.1移動端click事件300ms延時(shí)問題解決方案結(jié)視知道如何使用fastclick插件要點(diǎn)提示fastclick插件使用掌握程度：了解8.2fastclick插件使用結(jié)視1.禁用縮放。瀏覽器禁用默認(rèn)的雙擊縮放行為并且去掉300ms的點(diǎn)擊延遲。<metaname="viewport"content="user-scalable=no">2.利用touch事件自己封裝這個(gè)事件解決300ms延遲。3.使用插件。fastclick插件解決300ms延遲。8.3fastclick插件使用課堂問答視知識總結(jié)結(jié)引入swiper時(shí),注意引入順序要點(diǎn)提示swiper插件使用-引入相關(guān)文件掌握程度：應(yīng)用9.1swiper插件使用-引入相關(guān)文件視上午復(fù)習(xí)

用classList添加類名是件系統(tǒng)用classList刪除類名是件系統(tǒng)用classList切換類名是件系統(tǒng)WebAPIs第07天-上午復(fù)習(xí)上午復(fù)習(xí)用classList添加類名是:element.classList.add

用classList刪除類名是element.classList.remove用classList切換類名是element.classList.toggleWebAPIs第07天-上午復(fù)習(xí)如何復(fù)制代碼到自己的代碼中要點(diǎn)提示移動端輪播圖-按照語法規(guī)范使用掌握程度：應(yīng)用10.1移動端輪播圖-按照語法規(guī)范使用視知道如何查看手冊要點(diǎn)提示swiper插件使用-參數(shù)更改掌握程度：應(yīng)用11.1swiper插件使用-參數(shù)更改視要點(diǎn)提示移動端其他插件以及使用總結(jié)掌握程度：了解11.2移動端其他插件以及使用總結(jié)視知道如何引用zy.media.js文件要點(diǎn)提示視頻插件zy.media.js的使用掌握程度：了解12.1視頻插件zy.media.js的使用結(jié)視如何使用bootstrap框架要點(diǎn)提示bootstrap輪播圖掌握程度：應(yīng)用13.1bootstrap輪播圖結(jié)視要點(diǎn)提示19-阿里百秀輪播圖制作掌握程度：應(yīng)用13.2阿里百秀輪播圖制作結(jié)視Bootstrap是一個(gè)簡潔、直觀、強(qiáng)悍的前端開發(fā)框架，它讓web開發(fā)更迅速、簡單。它能開發(fā)PC端，也能開發(fā)移動端BootstrapJS插件使用步驟：引入相關(guān)js文件復(fù)制HTML結(jié)構(gòu)修改對應(yīng)樣式修改相應(yīng)JS參數(shù)13.2阿里百秀輪播圖制作課堂問答視知識總結(jié)結(jié)要點(diǎn)提示本地存儲導(dǎo)讀掌握程度：了解14.1本地存儲導(dǎo)讀視sessionStorage的生命周期是多少?如何獲取數(shù)據(jù),儲存數(shù)據(jù),刪除數(shù)據(jù),清空數(shù)據(jù)要點(diǎn)提示本地存儲之sessionStorage掌握程度：了解14.2本地存儲之sessionStorage結(jié)視localStorage的生命周期是多少?如何獲取數(shù)據(jù),儲存數(shù)據(jù),刪除數(shù)據(jù),清空數(shù)據(jù)要點(diǎn)提示本地存儲之localStorage掌握程度：應(yīng)用14.3本地存儲之localStorage結(jié)視要點(diǎn)提示記住用戶名案例掌握程度：應(yīng)用14.4記住用戶名案例結(jié)視練習(xí)動動手，練一下這個(gè)記住用戶名案例吧！提示1、先判斷是否有這個(gè)數(shù)據(jù)2、在通過localStorage儲存數(shù)據(jù)10分鐘15.1記住用戶名案例記住用戶名案例練習(xí)視