1. 程式人生 > >[js移動端互動]移動端互動大綱篇

[js移動端互動]移動端互動大綱篇

day01.基礎事件

1)touchstart介紹及使用
2)touchmove介紹及使用
3)touchend介紹及使用
4)案例分析

day02.event物件

1)取消預設事件 
2)阻止冒泡
3)防止文字選中和阻止預設選單
4)滑鼠事件延遲
5)事件點透問題
6)案例分析

day03.觸控事件(touchEvent)

1)touches介紹及使用
2)changedTouches介紹及使用
3)targetTouches介紹及使用
4)案例分析

day04.滑屏處理

1)拖拽原理分析
2)滑屏幻燈片簡版 
3)案例分析及介紹

day05.2D變換(transform2D)

1)rotate()、scale()、skew()、translate()
2)left和top引起的迴流問題及優化
3)處理transform中不能通過計算後樣式獲取的問題
4)案例分析及介紹

day06. 動畫(transition)

1) transition基本知識點
2) 貝賽爾曲線運動
3) transitionend事件
4) transition 不執行的BUG
5)案例分析及介紹

day07.例項:移動端版音悅臺首頁製作

1) rem佈局適配
2) 橫豎屏切換適配
3) fixed定位的BUG及替代方案
4) 滑屏導航緩衝回彈動畫的實現
5) 完整版無縫滾動的滑屏幻燈片
6) 滑屏選項卡
7)案例分析及介紹

day08.3D動畫(transform3D)

1) 滑動旋轉的方塊
2) 3d多邊體制作
3) 正n邊形的外角計算與正n邊形的中心點計算
4)案例分析及介紹

day09. 3D桌面切換

1) 百分比配合怪異盒模型佈局適配
2) animation的loading動畫
3) 立體三稜柱製作
4) 頁面絕對座標獲取
5) iOS下3D變換的相容問題及解決方案
7)案例分析及介紹

day10.自定義滾動條

1) 滾動條比例計算
2) 圖片隨滾動條的按需載入        
3) 渲染優化-canvas(GPU渲染加速)
4) transition安卓卡頓BUG--3D硬體加速  
5)案例分析及介紹      

day11.多指觸控事件

1) 雙指操作圖片縮放和旋轉
2) 安卓多指事件的相容解決
3) 勾股定理與Math.atan2(與X軸的絕對夾角)
3) transform執行時的殘影問題解決
4)案例分析及介紹

day12 移動端手勢js框架介紹

1)百度的Touch.js 
2)zepto的touch.js
3) hammer.js
4) 專案:移動端音樂播放器

day13.原生例項專案

1)完整版的移動端相簿