一、課程大綱

1. 基礎事件

touchstart

touchmove

touchend

2. event對象

取消默認事件

阻止冒泡

防止文字選中和阻止默認菜單

鼠標事件延遲

事件點透問題

3. touchEvent

touches

changedTouches

targetTouches

4. 滑屏處理

拖拽原理分析

滑屏幻燈片簡版

5. transform2D變換

rotate() scale() skew() translate()

left和top引起的回流問題及優化

處理transform中不能通過計算計算後樣式獲取的問題

6. transition動畫

transtion基本知識點

貝塞爾曲線運動

transitioned事件

transition不執行的bug

7. 實例 移動端版音悅臺首頁制作

rem布局適配

橫豎屏切換適配

fixed定位的bug及替代方案

滑屏導航緩沖回彈動畫的實現

完整版無縫滾動的滑屏幻燈片

滑屏選項卡

8. transform3D

滑動旋轉的方塊

3d多邊體制作

正n邊形的外角計算與正n邊形的中心點計算

9. 3d桌面切換

百分比適配怪異盒模型布局適配

animation的loading動畫

立體三棱柱制作

頁面絕對坐標獲取

ios下3d變換 的兼容問題及解決方案

10.

二、基礎知識

1. 像素

iphone5 640*1136像素 物理像素

px 邏輯像素 瀏覽器使用的抽象單位 640*1136的div不能在iphone5上鋪滿

dp,pt設備無關像素

dpr設備像素縮放比

1px=(dpr)^2*dp 平面上

1px=dp*dp 緯度

2. viewport

* ios的viewport=980

手機瀏覽器默認為我們做了2件事

頁面渲染在一個980px(ios)的viewport 縮放

窗口縮放sacle

3. meta標簽

設置viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

minimum-scale

maximum-scale

user-scalable用戶能否縮放

4. 設計移動web

方案1 根據設備的實際寬度來設計(常用)

方案2 1px=1dp 縮放0.5

1px邊框和高清圖片都不需要額外處理

這2種都不好

5. 彈性盒子布局

flex：1； 1/n

混合劃分：

水平垂直居中：

常見布局

兼容性：

ios可以使用最新的flex布局

android4.4及以上可以使用最新的flex布局

android4.4以下使用舊flex

6. 響應式設計

媒體查詢是核心

百分比

彈性圖片 即圖片大小為百分比

重新布局，顯示與隱藏 絕對定位(經常切換位置的元素)

7. 特別樣式處理

圖片大小用dp

1px邊框

rem根據html的font-size為相對單位，rem=screen.width/20，font-size不應該使用rem而使用px

8. 交互事件 touch

移動web上的click事件響應都要慢300ms

使用Tap(自定義)事件代替click事件

Tap事件的點透bug:點擊蒙層，下面元素的click會觸發

9. touch事件

touch android bug

彈性滾動：

上拉加載：scroll事件 而不是touch事件

10.

三、

移動端(1)