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. CodeForces 698A - Vacations (Codeforces Round #363 (Div. 2))

    要么去体育馆,要么去比赛,要么闲在家里 给出每一天体育馆和比赛的有无情况,要求连续两天不能去同一个地方 问最少闲几天 DP方程很容易看出 dp(第i天能去的地方) = min(dp(第i-1天的三种情 ...

  2. bootstrap输入框从数据库读取数据

    https://github.com/lzwme/bootstrap-suggest-plugin

  3. win32 清空ListBox所有内容

    Q:clear listbox hi i am working in VC++ 6 using Win32 App. .............tell me how to clear the lis ...

  4. mac/linux install hg

    MAC OSX 10.9: sudo port -v install mercurial or easy_install mercurial

  5. 今日哈工大刷推荐python脚本

    import httplib import random import time import urllib2 import re address = raw_input("Please i ...

  6. QT:使用“状态模式”绘制界面

    QT与很多GUI库不同(如MFC),它不能随时随地地在界面上画图,只能在界面类的painterEvent中画图,如此一来,想在绘制QT界面时使用状态模式(GOF的23种设计模式之一)就有点困难了,作为 ...

  7. VC++学习之一

    对于编程语言,我一直认为它只是一种工具,就像锤子,斧头一样,每种语言都用自己比较适用的地方,用的时候拿来就可以了.这种思想让我对语言没有做过很仔细的学习,虽然频繁使用过C,C++,java,C#,De ...

  8. Mininet 搭建自定义网络

    Mininet支持参数化拓扑,用几行python代码,你就可以创建一个基于你传进去的参数配置的灵活拓扑结构,还可被多个实验重复使用. 下面是一个小例子:(基于mininet/topo.py:Singl ...

  9. Framework7功能齐全的 iOS7 App 前端框架

    Framework7 是一个功能很全的 HTML 框架,用来构建 iOS7 应用程序. Framework7 允许您灵活搭建列表视图(表视图) .你可以让他们作为导航菜单,你可以在列表里面使用图标,输 ...

  10. Linux学习4——Vim和Bash

    一.写在前面  本将将介绍Linux自带的强大的文本编辑器Vim和Bash的相关知识. 二.完成目标 1.了解Vim和Bash的基本概念 2.定制自己的vim 3.Bash中的一些命令 4.管道命令 ...