开发一个移动端相册

2019独角兽企业重金招聘Python工程师标准>>>

兼容性问题

1. android和ios的引擎都是webkit的内核
2. 手势操作代替鼠标事件:mousedown,mouseup,click
3. 设备分辨率不同:pad,phone ,所以需要"响应式布局"来适应不同的分辨率的机器
4. CSS3代替 DOM aination: DOM操作很多时候是在pc端为了适应对ie等浏览器的兼容性来使用 CSS3在移动设备上不需要考虑兼容性,而且比dom操作来实现动画效果更佳高效 CSS3直接用设备的GPU来渲染,更快

touch事件

1. touchstart 按下屏幕一瞬间出发
2. touchmove 按住屏幕滑动
3. touchend 手指离开屏幕
4. touchcancel(一般用不到) 触摸操作被系统原生事件打断:比如来电等.

zepto.js

zepto需要额外引入touch.js,它把touch事件封装成了更易用易懂的tap事件 tap singleTap doubleTap longTap

swipe swipeLeft swipeRight swipeUp swipeDown

为什么使用touch事件而不是用click事件

• click 事件延时较长,听说有300ms
• touch 事件支持"多点触摸"
• 手势操作

优化技巧

• 对于图片应用中,用canvas代替image标签来展示. canvas会调用系统gpu加速来展示图片,而image在显示多张图片时会很卡
• drawImage(image,x,y,width,height) 把一张图片"画"入canvas画布中,参数(图片源,canvas画布上的位置(x,y),图片的宽高(默认是图片原来大小,传入值可以控制图片的缩放))
• Image Object
  1. 预加载图片 img标签可以理解为一个Image Object的实例
  2. 图片按比例缩放'

CSS3

• 兼容chrome safari opera @-webkit-keyframes 标准定义 @keyframes
• CSS3动画事件 webkitAnimationEnd事件:监听这个事件,当动画执行结束时,采取一个function
• CSS3框架(偷懒神器,感谢作者以及分享着) animate.css的使用 1. link引入animate.css3 2. 把目标元素的设置class为类似: class="animated shake" ,其中shake为具体的动画名称 animate.css

宽高比例不同的图片实现适应性缩放

$(window)获取浏览器窗口对象
$(window).width()获取窗口宽度

&&的意思

比如a()&&b()的意思是,如果a()返回ture,则表达式返回b()的返回值,如果a为false,则返回false

转载于:https://my.oschina.net/boogoogle/blog/624663