随笔- 443  文章- 77  评论- 996  阅读- 105万 
02 2016 档案
移动开发屏幕适配分析
摘要:我在开发前端的时候曾经会有几个疑惑: 1)拿到的设计搞的宽度是640px或750px的,在页面不同尺寸屏幕布局的时候怎么换算。 2)移动端布局是用%、px、rem、伸缩盒 Flexible Box Layout还是多列Multi-column。 3)用px设置了字体大小,但是在ipad上面显示的却很 阅读全文
posted @ 2016-02-26 09:59 咖啡机(K.F.J) 阅读(3392) 评论(2) 推荐(9) 编辑
CSS3伸缩盒Flexible Box
摘要:这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox、Chrome、Safrai等需要加浏览器前缀。 先说说这种布局的特点: 1)移动端由于屏幕宽度都不一样,在布局的时候为了适配,如果用百分比,就得精确计算,而且如果有1px边框,计算会更加复杂难控制 2)如果有多列 阅读全文
posted @ 2016-02-24 11:00 咖啡机(K.F.J) 阅读(1560) 评论(0) 推荐(5) 编辑
移动端图片操作(二)——预览、旋转、合成
摘要:在上一节中已经提到了预览,预览可以通过data: URL格式或URL对象。 一切都很顺利,但其实有很多的坑,需要慢慢讲来。先从前面做的一个小功能说起。 这个小功能就是将两张图片合成起来,组成一张新的图片。 一、技术实现 1)上传的控件就用“input[type=file]”实现 Android的we 阅读全文
posted @ 2016-02-23 10:00 咖啡机(K.F.J) 阅读(2794) 评论(1) 推荐(0) 编辑
移动端图片操作(一)——上传
摘要:上传我们一般都是用“input[type=file]”控件。当你用此控件时,你就授权了网页和服务器访问对应的文件,就可以得到File对象。 友情提示在,在Android手机webview中,是不支持上传文件的,网上说是修改Android端的代码,但我没试过,我们这边是使用客户端提供的接口来实现上传的 阅读全文
posted @ 2016-02-22 10:07 咖啡机(K.F.J) 阅读(4228) 评论(2) 推荐(1) 编辑
实现tap的多种方式
摘要:一、tap.js 这是一个比较轻量的插件tap.js,142行代码,支持模块化开发。 1)handleEvent addEventListener方法中的第二个参数,我原先并没有注意到其实可以传一个对象,该对象必是实现EventListener接口,查看在线代码。 var tap = { handl 阅读全文
posted @ 2016-02-19 10:02 咖啡机(K.F.J) 阅读(4959) 评论(0) 推荐(3) 编辑
Hammer.js分析(四)——recognizer.js
摘要:不同识别器会使用不同逻辑,根据从相关Input类获取到的事件对象和事件,实现自定义的触屏事件,例如tap、pinch等。 一、继承关系 Recognizer与前面的Input一样,也相当于是个抽象类。 从上图中可以看到,6个子类都会先继承AttrRecognizer类,因为AttrRecognize 阅读全文
posted @ 2016-02-18 10:09 咖啡机(K.F.J) 阅读(1088) 评论(0) 推荐(1) 编辑
Hammer.js分析(三)——input.js
摘要:input.js是所有input文件夹中类的父类,浏览器事件绑定、初始化特定的input类、各种参数计算函数。 Input父类和其子类就是在做绑定事件,各种参数计算、整合、设置等返回自定义事件对象,交给识别器的相关对象使用。 一、Input父类 Input相当于一个抽象类,对象中总共有3个方法 1) 阅读全文
posted @ 2016-02-17 10:00 咖啡机(K.F.J) 阅读(2348) 评论(1) 推荐(0) 编辑
Hammer.js分析(二)——manager.js
摘要:“Manager”是所有识别器实例的容器,它为你设置的元素安装了交互事件监听器,并设置了触摸事件特性。 manager.js中的代码会涉及到input.js和recoginzer.js中的内容,这里会先做大致的流程分析,具体分析会在接下来的文章中详谈。 一、Manager构造函数 初始化流程如下所示 阅读全文
posted @ 2016-02-16 09:49 咖啡机(K.F.J) 阅读(2023) 评论(0) 推荐(0) 编辑
Hammer.js分析(一)——基础结构
摘要:从github上面将源码下载下来,会发现有个src文件夹。当前版本是2.0.6。 总的结构如下: 一、常量 这里将常量全部列在一起是可以在对比源码的时候,更方便的查看相应内容。 二、utils.js 各种工具方法包含其中。 1)setTimeoutContext:封装了一下setTimeout 2) 阅读全文
posted @ 2016-02-15 10:07 咖啡机(K.F.J) 阅读(3219) 评论(0) 推荐(1) 编辑

点击右上角即可分享
微信分享提示