《javascript html5摇一摇功能的实现_》由会员分享，可在线阅读，更多相关《javascript html5摇一摇功能的实现_（5页珍藏版）》请在装配图网上搜索。
1、javascript html5摇一摇功能的实现_ 这篇文章主要为大家具体介绍了javascript html5摇一摇功能的实现过程，具有肯定的参考价值，感爱好的小伙伴们可以参考一下 通过网上的资料，加上自己的整理，写了一份html摇一摇功能的简介，用做技术备份。 学问要点 1、DeviceMotionEvent 这是html5支持的重力感应大事，关于文档请看：l 大事介绍： deviceorientation 供应设备的物理方向信息，表示为一系列本地坐标系的旋角。 devicemotion 供应设备的加速信息，表示为定义在设备上的坐标系中的卡尔迪坐标。其还供应了设备在坐标系中的自转速率。若可
2、行的话，大事应当供应设备重心处的加速信息。 compassneedscalibration 用于通知Web站点用法罗盘信息校准上述大事。 2、大事简介 window.addEventListener(deviceorientation,function(event)/ 处理event.alpha、event.beta及event.gamma,true); alpha:90, beta:0, gamma:0; 这是 deviceorientation大事返回的参数，为了获得罗盘指向，可以简洁的用法360度减去alpha。若设被平行于水平表面，其罗盘指向为(360 - alpha)。 若用户手持设
3、备，屏幕处于一个垂直平面且屏幕顶端指向上方。beta的值为90，alpha和gamma无关。 用户手持设备，面对alpha角度，屏幕处于一个垂直屏幕，屏幕顶端指向右方，则其方向信息如下 alpha:270- alpha, beta:0, gamma:90; 注册一个devicemotion大事的接收器： 代码如下: window.addEventListener(devicemotion,function(event)/ 处理event.acceleration、event.accelerationIncludingGravity、/ event.rotationRate和event.inte
4、rval,true); 将设备安置于车辆之上，屏幕处于一个垂直平面，顶端向上，面对车辆后部。车辆行驶速度为v，向右侧进行半径为r的转弯。设备记录acceleration 和accelerationIncludingGravity在位置x处的状况，同时设备还会记录rotationRate.gamma的负值： acceleration:x: v2/r, y:0, z:0, accelerationIncludingGravity:x: v2/r, y:0, z:9.81, rotationRate:alpha:0, beta:0, gamma:-v/r*180/pi; 功能实现 if(window
5、.DeviceMotionEvent) window.addEventListener(devicemotion, YaoYiYao,false); var speed =30;/speed var x = y = z = lastX = lastY = lastZ =0; function YaoYiYao(eventData) var acceleration =eventData.accelerationIncludingGravity; x = acceleration.x; y = acceleration.y; z = acceleration.z; if(Math.abs(x-l
6、astX) speed |Math.abs(y-lastY) speed |Math.abs(z-lastZ) speed) /简洁的摇一摇触发代码 alert(1); lastX = x; lastY = y; lastZ = z; 首先推断扫瞄器是否支持该大事。 YaoYiYao用来检测是否对手机进行摇动操作，具体就是猎取手机的的移动数据，将其存在一个外部变量中，当下次又触发摇动大事时，推断上次的摇动坐标 和现在的摇动坐标 是否处于一个频繁调动的范围：Math.abs(x-lastX) speed |Math.abs(y-lastY) speed |Math.abs(z-lastZ) speed 基本上 满足这种条件的话，就是手机正处于摇动状态，在if语句里面添加进你要执行的摇一摇代码即可。 以上就是html5摇一摇功能的实现思路，盼望对大家的学习有所关心。 .
javascript html5摇一摇功能的实现_
