html5重力感应事件
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重力感应事件的更多相关文章
- H5案例分享:html5重力感应事件
html5重力感应事件 一.手机重力感应图形分析 1.设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360). 设备在初始位置,与地球(XYZ)和身体(XYZ)某个位置对齐. 设备围绕z轴的旋转 ...
- html5重力感应事件之DeviceMotionEvent
前言 今天主要介绍一下html5重力感应事件之DeviceMotionEvent,之前我的一篇文章http://www.haorooms.com/post/jquery_jGestures, 介绍了第 ...
- h5手机摇一摇功能实现:基于html5重力感应DeviceMotionEvent事件监听手机摇晃
DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信 ...
- Cocos2D-X2.2.3学习笔记9(处理重力感应事件,移植到Android加入两次返回退出游戏效果)
这节我们来学习Cocos2d-x的最后一节.怎样处理重力感应事件.移植到Android后加入再按一次返回键退出游戏等.我这里用的Android.IOS不会也没设备呃 效果图不好弄,由于是要移植到真机上 ...
- HTML5重力感应小球冲撞动画实现教程
今天我们来分享一款很酷的HTML5重力感应动画教程,这款动画可以让你甩动页面中的小球,小球的大小都不同,并且鼠标点击空白区域时又可以生成一定数量的小球.当我们甩动小球时,各个小球之间就会发生互相碰撞的 ...
- HTML5 重力感应效果,实现摇一摇效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动端html5重力感应
下面是测试案例,只测试过itouch,iphone http://06wjin.sinaapp.com/billd/ http://06wjin.sinaapp.com/billd/test. ...
- 移动终端学习2:触屏原生js事件及重力感应
如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增 ...
- html5水平方向重力感应
html5图片随手机重力感应而移动 <!DOCTYPE html> <html lang="zh-cn"><head><meta http ...
随机推荐
- 查询sybase DB中占用空间最多的前20张表
按照数据行数查询 name, row_count(db_id(), id) from sysobjects order by row_count(db_id(),id) desc 按照分配的空间查询 ...
- div背景等比例缩小
background: url("http://www.asdear.com/Content/loginPage/newimages/nchina.png") 50% 0px no ...
- jsp include 乱码问题的解决
jsp include 乱码问题的解决 博客分类: Java JSPWeb浏览器IESpring jsp include 乱码问题的解决 jsp include 的文件有时候会出现乱码,经过测试发现 ...
- Path Sum,Path Sum II
Path Sum Total Accepted: 81706 Total Submissions: 269391 Difficulty: Easy Given a binary tree and a ...
- Qt 编程训练之七
Qt进程间通信 TCP / IP 跨平台的 QtNetwork模块提供的类网络编程便携式和容易. 它提供了高层类(例如,QNetworkAccessManager, QFtp)使用特定的应用层协议通信 ...
- Matplotlib不显示图形
安装好了Matplotlib,使用官方一个例子测试运行时,发现使用画图功能时,运行脚本老是显示不出图像,Google了一下,后来发现是matplotlibrc文件没配置好. 参考了官方文档,修改步骤如 ...
- html 调用 activeX(c++)
1.新建MFC ActiveX 2.添加方法 3.找到add函数编写代码 4.在test.idl中找到最后一个uuid 5.编译工程,会自动注册控件 6.html中的代码 <html> & ...
- jquery 字符个数(数字字母长度记为1,中文记为2,超过长度自动截)
<script type="text/javascript"> //返回val的字节长度 function getByteLen(val) { var len = ...
- sublime远程连接到linux主机
sublime远程连接到linux主机 sublime远程连接到linux主机 微信开发,直接使用sublime的sftp功能修改wx_sample.php 1.为sublime安装安装包管理插件Pa ...
- 打造阅读Linux源代码利器
打造阅读Linux源代码利器 在Linux里阅读/编写代码一般用vi 但是碰到较大的项目时阅读源代码还是比较费力,一直用find 和 grep命令. 其实,我们自己可以打造一个阅读源代码的vim,这 ...