if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
}
var speed = 30;//speed
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData) {
var acceleration =event.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;
}

摇一摇触发事件,感觉还是蛮高大上的

html5重力感应事件的更多相关文章

  1. H5案例分享:html5重力感应事件

    html5重力感应事件 一.手机重力感应图形分析 1.设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360). 设备在初始位置,与地球(XYZ)和身体(XYZ)某个位置对齐. 设备围绕z轴的旋转 ...

  2. html5重力感应事件之DeviceMotionEvent

    前言 今天主要介绍一下html5重力感应事件之DeviceMotionEvent,之前我的一篇文章http://www.haorooms.com/post/jquery_jGestures, 介绍了第 ...

  3. h5手机摇一摇功能实现:基于html5重力感应DeviceMotionEvent事件监听手机摇晃

    DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信 ...

  4. Cocos2D-X2.2.3学习笔记9(处理重力感应事件,移植到Android加入两次返回退出游戏效果)

    这节我们来学习Cocos2d-x的最后一节.怎样处理重力感应事件.移植到Android后加入再按一次返回键退出游戏等.我这里用的Android.IOS不会也没设备呃 效果图不好弄,由于是要移植到真机上 ...

  5. HTML5重力感应小球冲撞动画实现教程

    今天我们来分享一款很酷的HTML5重力感应动画教程,这款动画可以让你甩动页面中的小球,小球的大小都不同,并且鼠标点击空白区域时又可以生成一定数量的小球.当我们甩动小球时,各个小球之间就会发生互相碰撞的 ...

  6. HTML5 重力感应效果,实现摇一摇效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 移动端html5重力感应

    下面是测试案例,只测试过itouch,iphone http://06wjin.sinaapp.com/billd/     http://06wjin.sinaapp.com/billd/test. ...

  8. 移动终端学习2:触屏原生js事件及重力感应

    如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增 ...

  9. html5水平方向重力感应

    html5图片随手机重力感应而移动 <!DOCTYPE html> <html lang="zh-cn"><head><meta http ...

随机推荐

  1. [Spring Boot Reference Guide] 读书笔记一 Getting Started

    8. Introducing Spring Boot Goals of spring boot: Provide a radically faster and widely accessible ge ...

  2. django models 类型整理 version:1.8.3

    django models 类型整理 version:1.8.3 网上百度到的最上面的一篇已经是11年的了,django变化很大,现在把1.8.3版的models类型大致整理了下贴出来 普通键部分 F ...

  3. 自动生成XML空节点格式的差异

    我们用C#开发了上位机配置软件,用C开发了嵌入式软件,然后他们之间的参数交互靠XML文件来沟通. C#中添加一个空的节点有以下几种情况. 不给节点的InnerText赋值: <root> ...

  4. TensorFlow深度学习笔记 Tensorboard入门

    转载请注明作者:梦里风林 Github工程地址:https://github.com/ahangchen/GDLnotes 欢迎star,有问题可以到Issue区讨论 官方教程: https://ww ...

  5. 什么是Intent(意图)

    1.Intent是一种运行时绑定(runtime bingding)机制,它能在程序运行的过程中连接两个不同的组件.通过Intent,你的程序可以向Android表达某种 请求或者意愿,Android ...

  6. Matlab 仿真实现TI Instaspin 的Foc 逆Clarke变换和SVPWM

    一直没搞明白TI 的Instaspin的SVPWM实现原理,最后只能在Matlab里仿真看看输出波形是不是和普通的SVPWM实现输出的波形一样,用M文件实现,下面是代码: clear all; the ...

  7. Oracle EBS-SQL (PO-13):检查采购物料无一揽子协议价格.sql

    Select        msi.segment1                               物料编码,       msi.DESCRIPTION                 ...

  8. Cxf -Wsdl2java详细参数附录

    wsdl2java用法: wsdl2java -p com -d src -all  aa.wsdl -p  指定其wsdl的命名空间,也就是要生成代码的包名: -d  指定要产生代码所在目录 -cl ...

  9. iostat,mpstat,sar即时查看工具,sar累计查看工具

    iostat,mpstat,sar即时查看工具,sar累计查看工具

  10. (转载博文)MFC 窗口句柄获取

    句柄获取方法(获取该窗口的句柄后,即可向该窗口类类发送消息.处理程序):0.获取所在类窗口的句柄: this->m_hwnd 1.主窗口的句柄: 无论在主窗口类内,还是子窗口类内,获取主窗口句柄 ...