开发一个移动端相册

兼容性问题

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