本文主要是介绍开发移动端 web 相册这样一案例用到的前置知识。
移动端更接近手机原生的方式。
如下是一个 angular mobile 的的例子:
移动端 demo 做成这样的好处:
因为移动端主要的浏览器内核是 webkit,所以可以用 chrome 开发。可以模拟 UA 和分辨率。
模拟触摸行为,注意 touch 和 click 区别。
也可以开启其他模拟。
Android 和 ios 都是 webkit 内核,firefox os 是 greasemonkey 内核。
弃用事件 mousedown,mouseup,click。
使用手势操作代替鼠标输入 / 输出事件
响应式布局
CSS3 代替 DOM animation 动画效果
(为兼容 IE:PC 端用 setTimeout 定时器,定时修改 DOm 元素的 style 属性实现动画)
优势:css3 使用设备 GUP 渲染,动用硬件设备的计算能力做展示,效率高。
PC 端:兼容 ie,冗余代码,但是计算效率高。
移动端和 PC 相比:轻 重效率 ,希望在 3g 网络加载更少的代码,加载更快。
移动端开发框架:jquery mobile , , 简单的还用不到框架,通过组件做复杂应用非常简单。我们做的页面简单,谈不上完整的 app 效果,用不到复杂应用框架。
移动端开发库:
也可以用纯原生的 javascript 的 API。
zepto 也除了提供一些 API,也提供了些插件,比如 touch 和 gesture,。
zepto.js 库和其他移动端框架区别,可查。
touch.js 独立于 zepto.js 存在,单独在。
touchstart---》touchmove---》touchend 和 touchcancle。
当滑动屏幕时,来了个系统事件,比如来了个电话,此时就会进入接电话面板,整个的触摸事件就会被 cancle 掉, 就会触发 touchcancle 事件。
zepto.js 的事件,在原生 touch 事件基础上做了封装,依赖于 zepjs 的一些插件,touch.js 暴露的事件
通常来讲,Image 标签展示一张图片是用浏览器本身来做渲染的。
当一个图片很大的时候,
或者一个网页中有很多张大的图片的时候,
而你的手机性能又不是特别好的情况下,图片展示就会特别卡。
这个卡通常是在滑动图片,滚动条滚动图片的时候,会感觉图片非常卡,因为没有触发物理设备本身的 GPU 来渲染。
如何触发物理设备 GPU 渲染?使用 Canvas。
有一本书《html5 Canvas》来介绍 canvas,内容太多,下面只介绍一个 API。
drawImage API:把一张原本使用 Image 标签的图片画在 Canvas 上面。
通常用到 drawImage(image,x,y,width,height)。
参数 image:image 对象,要画的图片。
x,y: 要画的图片是从 canvas 的哪个坐标点开始。
坐标通常是(0,0) 点,使用的也是第四象限的坐标系。
width,height: 要画的这张图的宽度和高度是多少,通常不传也可以,不传的话图片有多大画多大。
传入的话就是控制图片的缩放。
drawImage 第一个参数要传入一 Image 对象,那什么是 Image 对象呢?
在手机上加载图片,有一种方式,预加载图片。预加载图片就要用的 Image 对象了。我们通常看到的是 Image 标签。
Image 标签就可以理解为 Image 对象。
Image 对象的作用:预加载图片和图片按比例缩放。
例子:
当设置一个 img 对象的 src 的时候,实际上就是向网络上发送一个请求,来请求这张图片。
- var img = new Image();
- img.onload = function() {
- debugger
- }
- img.src = 'https: //www.baidu.com/img/bdlogo.gif';
执行的时候进入了 img 的 onload 事件,说明请求发送成功了,同时图片加载回来了,才会触发 Image 对象的 onload() 方法。
可以看看 Image 标签加载回来的图片都有些什么属性?
可以在控制台 debug 的 Watch 中添加一个 this。
通过这种方式加载出来的图片,我们可以获得它的高度,宽度。以及它的自然的宽度和自然的高度。
有了这些信息,可以根据图片大小和当前设备的分辨率动态的调整图片的大小。如果只使用传统的 Image 标签是没办法做到的。
点击了解 css3 动画知识。
为什么要有动画事件?当一个动画结束后,我想执行一个操作时怎么办?怎么用 js 做逻辑控制?此时必须用 css3 的动画事件。
当一个动画结束的时候,我们可以监听一个元素的 animationEnd 事件来实现。
webkit 浏览器需要加 webkit 前缀。
做动画时, css3 动画框架可以用。
引用 animate.css,在动画元素上加 class animate rotateIn。
来源: http://www.bubuko.com/infodetail-1953399.html