妙味前端-事件交互實戰教程
2016年8月
1.基礎事件
2.event對象
xa0 xa0 1)取消默認事件
xa0 xa0 2)阻止冒泡
xa0 xa0 3)防止文字選中和阻止默認菜單
xa0 xa0 4)鼠標事件延遲
xa0 xa0 5)事件點透問題
4.滑屏處理
xa0 xa0 1)拖拽原理分析
xa0 xa0 2)滑屏幻燈片簡版
5.transform2D 變換
xa0 xa0 2)left和top引起的回流問題及優化
xa0 xa0 3)處理transform中不能通過計算后樣式獲取的問題
6.transition 動畫
xa0 xa0 1) transition基本知識點
xa0 xa0 2) 貝賽爾曲線運動
xa0 xa0 3) transitionend事件
xa0 xa0 4) transition 不執行的BUG
7.實例:移動端版音悅臺首頁制作
xa0 xa0 1) rem布局適配
xa0 xa0 2) 橫豎屏切換適配
xa0 xa0 3) fixed定位的BUG及替代方案
xa0 xa0 4) 滑屏導航緩沖回彈動畫的實現
xa0 xa0 5) 完整版無縫滾動的滑屏幻燈片
xa0 xa0 6) 滑屏選項卡
xa0 xa0 1) 滑動旋轉的方塊
xa0 xa0 2) 3d多邊體制作
xa0 xa0 3) 正n邊形的外角計算與正n邊形的中心點計算
9. 3D桌面切換
xa0 xa0 1) 百分比配合怪異盒模型布局適配
xa0 xa0 2) animation的loading動畫
xa0 xa0 3) 立體三棱柱制作
xa0 xa0 4) 頁面絕對坐標獲取
xa0 xa0 5) IOS下3D變換的兼容問題及解決方案
10.自定義滾動條
xa0 xa0 1) 滾動條比例計算
xa0 xa0 2) 圖片隨滾動條的按需加載
xa0 xa0 3) 渲染優化-canvas(GPU渲染加速)
xa0 xa0 4) transition安卓卡頓BUG–3D硬件加速
11.多指事件
xa0 xa0 1) 雙指操作圖片縮放和旋轉
xa0 xa0 2) 安卓多指事件的兼容解決
xa0 xa0 3) 勾股定理與Math.atan2(與X軸的絕對夾角)
xa0 xa0 3) transform執行時的殘影問題解決
12.實例:完整版的移動端相冊