常见问题当前位置:星鸿娱乐 > 常见问题 > >

星鸿娱乐注册:javascript html5摇一摇功能的实现

  

[javascript,html5摇一摇]javascript html5摇一摇功能的实现

  

通过网上的资料,加上自己的整理,写了一份html摇一摇功能的简介,用做技术备份。

  
  知识要点  

  

1、DeviceMotionEvent  
  这是html5支持的重力感应事件,关于文档请看:  
  事件介绍:  
  deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角。

  
  devicemotion 提供设备的加速信息,表示为定义在星鸿娱乐注册设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。若可行的话,事件应该提供设备重心处的加速信息。

  
  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)。 若用户手持设备,屏幕处于一个垂直平面且屏幕顶端指向上方。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.interval},true);
  

  

将设备安置于车辆之上,屏幕处于一个垂直平面,顶端向上,面向车辆后部。车辆行驶速度为v,向右侧进行半径为r的转弯。设备记录acceleration 和accelerationIncludingGravity在位置x处的情况,同时设备还会记录rotationRate.gamma的负值:  
  

  
  
  {acceleration:{x: v^2/r, y:0, z:0},  accelerationIncludingGravity:{x: v^2/r, y:0, z:9.81},  rotationRate:{alpha:0, beta:0, gamma:-v/r*180/pi}};  
  
  

功能实现  
  
  

  
  
  if(window.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-lastX)> 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摇一摇功能的实现思路,希望对大家的学习有所帮助。

  

(责任编辑:admin)

上一篇:星鸿娱乐注册:关于backbone url请求中参数带有中

下一篇:把直播上升到战略层面的陌陌,目的是为了降低

推荐内容

客户服务热线

400 888 8932

在线客服