在智能移动设备浏览器上，通过HTML5的api使用移动设备的功能。
HTML5提供了很多对硬件的使用功能。sensor.js是使用这些功能的抽象的库。可以让开发者通过简单的javascript api快速使用这些功能，而不用花大量时间在功能实现和屏蔽各种设备差异的细节上。
这里: http://sensor.jishub.com 可以看到功能实例DEMO。
你可以通过控制移动设备的倾斜控制页面上的球的滚动。
通过摇晃移动设备改变页面的颜色。
获取你当前的经纬度，打开百度地图显示当前的位置。需要手动确认开启位置检测。
把某个元素使用可擦除的遮罩遮住，手指擦除遮罩面积达到或超过百分之40就清除全部遮罩。
Orientation会持续的取得移动设备的alpha, beta, gamma的值。
| 配置项 | 描述 | 默认值 |
|---|---|---|
| callback | (Function) 角度/弧度改变的回调函数 | - |
| alphaThreshold | (number) alpha改变触发回调的临界值 | 0 |
| betaThreshold | (number) beta 改变触发回调的临界值 | 0 |
| gammaThreshold | (number) gamma改变触发回调的临界值 | 0 |
| timeInterval | (number) 判断倾斜值变化的时间间隔(毫秒) | 300 |
| radians | (boolean) 是否使用弧度值 | false |
| 返回倾斜值 | 描述 |
|---|---|
| alpha | (number) 移动设备水平旋转的角度/弧度值 |
| beta | (number) 移动设备前后倾斜的角度/弧度值 |
| gamma | (number) 移动设备左右倾斜的角度/弧度值 |
用法:
//使用amd js加载工具 require(['orientation'], function(Orientation) { // options为函数时就作为配置项的callback配置项 new Orientation(function(data){ //处理data... }).start(); })Shake会监听移动设备的摇晃动作，会返回触发事件时各个方向的加速度值(考虑重力加速度)。
| 配置项 | 描述 | 默认值 |
|---|---|---|
| callback | (Function) 摇晃设备的回调函数 | - |
| threshold | (number) 各个方向加速度值改变触发回调的临界值 | 10 |
| timeInterval | (number) 判断加速度值变化的时间间隔(毫秒) | 500 |
| 返回值 | 描述 |
|---|---|
| x | (number) x轴加速度(考虑重力加速度) |
| y | (number) y轴加速度(考虑重力加速度) |
| z | (number) z轴加速度(考虑重力加速度) |
用法:
//使用amd js加载工具 require(['shake'], function(Shake) { new Shake(function(data){ //处理data... }).start(); })获取用户设备GPS定位经纬度。
| 配置项 | 描述 | 默认值 |
|---|---|---|
| callback | (Function) 获取到经纬度或转换过的经纬度后的回调函数 | - |
| 返回值 | 描述 |
|---|---|
| errorMessage | (string) 如果定位没有成功，提示错误信息 |
| latitude | (number) 纬度值 |
| longitude | (number) 经度值 |
| accuracy | (number) 定位精度 |
| altitude | (number) 相对于海平面的海拔高度 |
| altitudeAccuracy | (number) 海拔精度 |
| heading | (number) 方向，从正北开始以度计 |
| speed | (number) 速度，以米/每秒计 |
| timestamp | (number) 响应的日期/时间 |
用法:
//使用amd js加载工具 require(['geolocation'], function(Geolocation) { new Geolocation(function(data){ //处理data... if (!data.errorMessage) { var lat = data.latitude; var lon = data.longitude; } }).start(); })给元素添加可擦除的遮罩。
| 配置项 | 描述 | 默认值 |
|---|---|---|
| el | (Element,string) 需要遮罩的DOM节点 或 节点的id | - |
| callback | (Function) 擦除一部分后的回调函数，函数会接收到擦除的百分比 | - |
| image | (string) 用于遮罩的图片 默认不用图片 | - |
| width | (number) 遮罩宽度 | 被遮罩的元素宽度(不包括border) |
| height | (number) 遮罩高度 | 被遮罩的元素高度(不包括border) |
| left | (number) 遮罩style的left值 遮罩为绝对定位 | 0 |
| top | (number) 遮罩style的top值 遮罩为绝对定位 | 0 |
| color | (string) 遮罩层颜色 默认使用背景颜色为#666的遮罩 | #666 |
| alpha | (number) 遮罩的透明度 默认不透明 | 100 |
| checkDistance | (number) 用于计算擦除部分的比例的计算点之间的间距，越小越精确，而执行效率越低 | 20 |
| showPoint | (boolean) 显示计算点，一般在测试的时候才用 | false |
| radius | (number) 擦除半径大小 | 20 |
| alphaRadius | (number) 擦除外边缘半透明渐变距离(注: 在计算擦除面积时只算完全擦除的部分) | 10 |
| eraseWidth | (number) 擦除宽度(注: 配置该属性即设置擦除的形状为矩形，值为矩形宽度) | - |
| eraseHeight | (number) 擦除高度 | - |
| smooth | (boolean) 擦除的形状为矩形时有效，是否用椭圆替换矩形，使擦除时边缘更平滑 | true |
| 返回值 | 描述 |
|---|---|
| percent(返回值本身) | (number) 擦除的面积占整个遮罩的百分比 |
用法:
//使用amd js加载工具 require(['erasableMask'], function(Mask) { var bodyStyle = document.body.style; // 禁止浏览器默认选中内容 bodyStyle.mozUserSelect = 'none'; bodyStyle.webkitUserSelect = 'none'; var perStr; var mask = new Mask('imgWrap', { width: 500, height: 400, maskImage: '../images/pet2.jpg', showPoint: false, callback: function(percent) { perStr = '擦除百分比为：' + Math.floor(percent) + '%'; console.log(perStr); if (percent >= 40) { mask.clearMask(); mask.stop(); } } }); mask.start(); })();- https://developer.mozilla.org/en-US/docs/tag/Sensors
- http://blog.csdn.net/hursing/article/details/9046837
- http://blog.csdn.net/hursing/article/details/9061991
- http://www.w3schools.com/html/html5_geolocation.asp
- http://www.w3schools.com/tags/ref_canvas.asp
- https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect