|
妙味前端-事件交互实战教程 2016年8月 mmwwkktt 1.基础事件
1)touchstart7 U3 h6 |/ q' M) z/ t9 c5 Z2 q
2)touchmove
3)touchend9 i' x& u* ~2 ^; T9 P5 w
2.event对象
1)取消默认事件
2)阻止冒泡9 B# m* j" m4 ^; b
3)防止文字选中和阻止默认菜单
4)鼠标事件延迟$ ^/ v4 E. |7 u" d7 n% V
5)事件点透问题' X; q% G' }# r
3.touchEvent2 Z; i4 l0 |! W- m6 Q9 J
1)touches7 C% s" \' H& P2 B. l$ p; q
2)changedTouches
3)targetTouches4 q% ~6 P" d1 R& j$ R( d! Q! M
4.滑屏处理1 X: ~! }$ a, ]) X8 }+ r
1)拖拽原理分析- q" [2 U4 L; a3 Q$ _/ T
2)滑屏幻灯片简版
5.transform2D 变换 Z% C t) ^) G/ |
1)rotate()、scale()、skew()、translate()
2)left和top引起的回流问题及优化& p! t# d2 s7 ?8 D; g F, {
3)处理transform中不能通过计算后样式获取的问题
6.transition 动画; V% J6 H5 W8 I; v2 L
1) transition基本知识点$ T9 ~5 \& f" _7 w0 F. d
2) 贝赛尔曲线运动5 B. ` K# f D" ]$ B8 B
3) transitionend事件2 j' _4 }* h: N" U8 D
4) transition 不执行的BUG
7.实例：移动端版音悦台首页制作, I! m) c3 i6 f {2 q7 ~
1) rem布局适配
2) 横竖屏切换适配5 g! z5 q: I; m7 j& H/ u6 T
3) fixed定位的BUG及替代方案* N% P/ H$ A7 g8 `7 l) g
4) 滑屏导航缓冲回弹动画的实现
5) 完整版无缝滚动的滑屏幻灯片3 j; P2 o3 K1 B2 A3 c
6) 滑屏选项卡
8.transform3D! p, n" a% N0 ^. n4 B% c
1) 滑动旋转的方块
2) 3d多边体制作
3) 正n边形的外角计算与正n边形的中心点计算
9. 3D桌面切换
1) 百分比配合怪异盒模型布局适配
2) animation的loading动画
3) 立体三棱柱制作
4) 页面绝对坐标获取
5) IOS下3D变换的兼容问题及解决方案
10.自定义滚动条0 {6 W# F: X$ f2 _6 f
1) 滚动条比例计算% w* r, R2 B7 e+ M) Z4 v- O& x
2) 图片随滚动条的按需加载
3) 渲染优化-canvas(GPU渲染加速)! b, t. b: O+ _ A" L
4) transition安卓卡顿BUG--3D硬件加速
11.多指事件* ]6 o! r3 N; S; M1 {' a
1) 双指操作图片缩放和旋转" i9 `6 T! A$ V
2) 安卓多指事件的兼容解决: }* ]8 r( O* s1 e2 o
3) 勾股定理与Math.atan2(与X轴的绝对夹角)
3) transform执行时的残影问题解决* L4 K7 C+ P9 B/ N! g3 \( R
12.实例：完整版的移动端相册% I) Y) a4 R9 x$ B | 
[复制链接]
