Recomendados
Más contenido relacionado
Más de Tom Fan
Más de Tom Fan (20)
Deviceaccess
- 1. HTML5 开发 Web,MobileWeb & Apps 范圣刚 安博中程在线
- 6. Geolocation API 可以获得用户所在地理位置的经纬度信息 调用 Geolocation API 从全局 navigator对象的 geolocation属性开 始：navigator.geolocation 安博中程在线 1 2 3 4 5 6 <script type='text/javascript'> // 最简单的使用方式：没有做任何的检测，错误处理，也没有选项参数 function find_my_location() { navigator.geolocation.getCurrentPosition(show_map); } </script> 6/42
- 7. Geolocation API 检测浏览器是否支持地理位置API 方法1： 检测检测 全局对象 navigator 是否具有 geolocation 属性 方法2: 使用Modernizr提供的方法 检测检测 安博中程在线 1 2 3 4 5 <script type='text/javascript'> function supports_geolocation() { return !!navigator.geolocation; } </script> 1 2 3 4 5 6 7 8 9 <script type='text/javascript'> function find_my_location() { if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(show_map); } else { // 浏览器没有提供原生支持，使用回退方案 } } </script> 7/42
- 8. Geolocation API getCurrentPosition() 使用getCurrentPosition()方法 获取当前位置信息获取当前位置信息 . 安博中程在线 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script type='text/javascript'> function find_my_location() { if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(show_map); } else { // 其他方案 } } function show_map(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; alert('Lat: ' + latitude + ' Lon: ' + longitude); } </script> 8/42
- 9. Position 数据 成功的回调函数的参数是一个 Position对象，包括 coords和 timestamp两个属性。 属性 类型 备注 coords.latitude double 纬度(度) coords.longitude double 经度(度) coords.accuracy double 精度(米) coords.altitude double或null 海拔(米) coords.altitudeAccuracy double或null 海拔精度(米) coords.heading double或null 度(顺时针，以正北为基准) coords.speed double或null 米/秒 timestamp DOMTimeStamp 可以转成Date对象 安博中程在线 9/42
- 11. PositionError 对象 属性 类型 备注 code short 可枚举 message DOMString 与终端用户无关 其中code属性具有以下属性值： 安博中程在线 PERMISSION_DENIED(1): 用户不同意被获取位置信息。 POSITION_UNAVAILABLE(2): 网络不可用或者无法连接到获取位置信息的卫星。 TIMEOUT(3): 网络可用但是花了太长时间的计算用户的位置上。 UNKNOWN_ERROR(0): 发生其他未知错误。 · · · · 11/42
- 12. PositionOptions 对象 两种定位方式和缓存的位置信息 属性 类型 默认值 备注 enableHighAccuracy boolean false 设成 true 可能会使得获取位置的速度变慢 timeout long 没有默认值 单位：毫秒 maximumAge long 0 单位：毫秒 安博中程在线 12/42
- 15. orientationchange 事件 苹果公司为移动 Safari 添加了 orientationchange事件，以便开发人员能确定用户 何时将设备由横向查看模式切换为纵向查看模式。移动 Safari 的 window.orientation属性中可能包含3个值： 安博中程在线 0表示肖像模式（Portrait） 90表示向左旋转的横向模式（“主屏幕”按钮在右侧） -90表示向右旋转的横向模式（“主屏幕”按钮在左侧） · · · 15/42
- 16. 处理 orientationchange 事件 这时的 event对象不包含任何有价值信息，唯一相关的信息可以通过 window.orientation访问到。 安博中程在线 1 2 3 4 5 6 7 8 9 10 11 12 13 function updateOrientation() { switch(window.orientation) { case 0: // ... case 90: // .... case 90: // ... case 180: // ... } }; window.addEventListener('orientationchange', updateOrientation, false); 16/42
- 17. Demo: orientationchange 根据 orientationchange 事件动态更改图像大小 安博中程在线 17/42
- 20. deviceorientation 事件 加速度计检测到设备的方向发生变化时，会在 window对象上触发 deviceorientation事件。用于告诉我们设备在空间上朝向哪儿。 设备坐标系的概念：x轴方向是从左往右，y轴方向是从下往上，z轴方向是从后往 前。当设备静止放在水平桌面时，这三个值都是 0。 安博中程在线 20/42
- 21. deviceorientation 事件对象 事件对象包含着每个轴相对于设备静止状态下发生变化的信息。 设备坐标系的概念：x轴方向是从左往右，y轴方向是从下往上，z轴方向是从后往 前。当设备静止放在水平桌面时，这三个值都是 0。 其中三个主要的属性： 安博中程在线 alpha: 在围绕 z轴旋转时（即左右旋转时），y轴的度数差。 beta: 在围绕 x轴旋转时（即前后旋转时），z轴的度数差。 gamma: 在围绕 y轴旋转时（即扭转设备时），z轴的度数差。 · · · 21/42
- 22. alpha 围绕 z 轴旋转会引起 alpha 旋转角度发生变化。 当设备顶部指向地球正北方向时，alpha 角是 0 度，设备向左边旋转时增大，介于 0 - 360 度之间。 安博中程在线 22/42
- 23. beta 围绕 x 轴旋转，也就是前后翻转（朝着用户或者远离用户)时，会引起 beta 旋转角度 变化。 设备水平放置时，beta 角度是 0 度；向上翻逐步增加到 180 度；向下翻减少到 -180 度。 安博中程在线 23/42
- 24. gamma 围绕 y 轴旋转，会引起 gamma 角度值的变化。 水平放置角度是 0，向右拧增加到 90 度；向左拧减少到 -90 度。 安博中程在线 24/42
- 25. Demo: deviceorientation 安博中程在线 Rotate Chrome 模拟 orientation 事件：http://louisremi.github.com/orientation-devtool/ · · 25/42
- 26. MozOrientation 事件 兼容移动版 Firefox Firefox 移动浏览器上实现的检测设备方向的事件。静止状态下，x 值为 0，y 值为 0，z 值为 1。这几个值都介于1和-1之间。 安博中程在线 向右倾斜，x 会减少到 -1；向左倾斜，x 会增大到 1 向远离用户方向倾斜，y 值会减少到 -1；向接近用户方向倾斜，y 值会增大到 1； · · 1 2 3 4 5 // 针对 Android 版的 Firefox if (!evt.gamma && !evt.beta) { evt.gamma = (evt.x * (180 / Math.PI)); evt.beta = (evt.y * (180 / Math.PI)); } 26/42
- 27. deviceorientation 补充说明 截止2013年1月，Mozilla 声称自 FF6+ 之后都支持 deviceorientation事件，实际 并不支持；反而是号称从 3.6 开始支持，但是后面又移走的 MozOrientation事件在 Android 版的 Firefox 上支持 MozOrientation事件。 Chrome 和 Android 版的 WebKit，iOS4.2+ 的 Safari 均支持 deviceorientation 事件。 安博中程在线 参见：http://caniuse.com/#feat=deviceorientation 27/42
- 28. devicemotion 事件 deviceorientation的超集，除了方向信息以外，还有加速度信息。 安博中程在线 acceleration: 一个包含 x，y，z 属性的对象，不考虑重力加速度的情况。 accelerationIncludingGravity: 考虑 z 轴自然重力加速的情况下，告诉你每个方向 上的加速度。 · · 28/42
- 30. 触控和手势 Notes: 有些手势不产生事件，有些手势需要在一定的条件下才会产生事件；但是我们 可以通过组合各种手势进行处理。 安博中程在线 One-Finger Events Two-Finger Events Multi-Touch Events · The panning gesture The touch and hold gesture The double-tap gesture · · · · The pinch open gesture Two-finger panning gesture · · · 30/42
- 32. TouchEvent 事件类型 安博中程在线 touchstart: 当手指触摸屏幕时触发（即使已经有一个手指已经放在了屏幕上） touchmove: 当手指在屏幕上滑动时连续的触发 touchend: 当手指从屏幕上移开时触发 touchcancel: 当系统停止跟踪触摸时触发 · · · · 32/42
- 33. TouchEvent 的属性 安博中程在线 首先是在鼠标事件中常见的属性: bubbles, cancelable, detail, altKey, ctrlKey ... 其次是三个用于跟踪触摸的属性： · · touches: 表示当前跟踪的触摸操作的 Touch对象的数组 targetTouches: 特定于事件目标的 Touch对象的数组 changeTouches: 表示自上次触摸以来发生了什么改变的 Touch对象的数组 - - - 33/42
- 34. Touch 对象的属性 安博中程在线 clientX: 相对于 viewport 的 x 坐标，类型 long，单位像素 clientY: 相对于 viewport 的 y 轴坐标 identifier：触控点的唯一标识（比方说一根手指就是一个一个触控点） pageX: 页面中的 x 坐标 pageY：页面中的 y 坐标 screenX：屏幕中的 x 坐标 screenY：屏幕中的 y 坐标 target：触摸的 DOM 节点目标 · · · · · · · · 34/42
- 35. Multi-touch Demo Touch Events + Canvas 安博中程在线 设置触控事件处理程序 跟踪新的触控(touchstart)发生 随着滑动(touchmove)进行 Canvas 绘制 处理触控结束(touchend)事件 处理触控取消(touchcancel)事件 · · · · · 35/42
- 36. The panning gesture 直到用户停止 panning 的时候，One-finger panning 才会产生一个 onscroll事件 安博中程在线 A touch-scrollable div: http://eightmedia.github.com/hammer.js/scroll/ 36/42
- 37. The touch and hold gesture 长按不会产生事件；但是如果触控的是图片，可点击链接或是可编辑内容等往往会生 成一个 information bubble。(复制，粘贴，全选，图片另存为 ...) 安博中程在线 Basic demo: http://eightmedia.github.com/hammer.js/demo/ 37/42
- 38. The double-tap gesture double tap 也不产生任何事件 安博中程在线 Basic demo: http://eightmedia.github.com/hammer.js/demo/ 38/42
- 39. The pinch open gesture pinch open gesture 不产生任何鼠标事件 安博中程在线 http://eightmedia.github.com/hammer.js/zoom/, http://eightmedia.github.com/hammer.js/zoom/index2.html 39/42
- 40. Two finger panning gesture 安博中程在线 两根手指按住屏幕并移动，如果落在可滚动的元素上，产生 mousewheel事件 如果元素不是可滚动的，移动网页。在 panning 过程中不产生事件 当用户停止 panning 时，产生一个 onscroll事件 · · · http://eightmedia.github.com/hammer.js/zoom/, http://eightmedia.github.com/hammer.js/zoom/index2.html 40/42
- 41. 扩展阅读 安博中程在线 W3C地理位置 API geo.js, 地理位置的JS Framework。依照W3C地理位置 API规范封装了底层系统特定的实现。 This End Up: Using Device Orientation Can I Use? Specification: Touch Events Drag and drop for iPhone and Android Safari Web Content Guide: Handling Events Hammer.js: A javascript library for multi-touch gestures MDN: Touch Events · · · · · · · · · 41/42
- 42. <Thank you!> 微博 @范圣刚 博客 www.tfan.org github github.com/princetoad