原理：使用DeviceMotion实现，关于DeviceMotion介绍可以查看


https://developer.mozilla.org/en-US/docs/Web/Reference/Events/devicemotion

通过DeviceMotionEvent，可以获得accelerationIncludingGravity的x,y,z属性，根据x,y,z属性的变化来判断设备是否有摇一摇的事件发生。

accelerationIncludeingGravity说明：

The acceleration of the device. This value includes the effect of gravity, and may be the only value available on devices that don’t have a gyroscope to allow them to properly remove gravity from the data.

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <meta http-equiv="content-type" content="text/html;charset=utf-8">

  <title> html5使用DeviceMotionEvent实现摇一摇 </title>

  <style type="text/css">

  .center{position:absolute; width:640px; height:480px; left:50%; top:50%; margin-left:-320px; margin-top:-240px; line-height:480px; text-align:center; font-size:100px; }

  .normal{background:#000000;}

  .normal .txt{color:#FFFFFF;}

  .doing{background:#FF0000;}

  .doing .txt{color:#FFFF00;}

  </style>

 </head>

 <body id="mybody" class="normal">

    <div id="txt" class="txt center">请执行摇一摇</div>

 </body>

 <script type="text/javascript">

    var doing = 0;  // 判断是否在动画显示中

    var speed = 23; // 定义摇动的速度数值

    var lastx = 0;

    var lasty = 0;

    var lastz = 0;

    function handleMotionEvent(event) {

        var x = event.accelerationIncludingGravity.x;

        var y = event.accelerationIncludingGravity.y;

        var z = event.accelerationIncludingGravity.z;

        if(doing==0){

            if(Math.abs(x-lastx)>speed || Math.abs(y-lasty)>speed){

                doing = 1;

                show();

            }

        }

        lastx = x;

        lasty = y;

        lastz = z;

    }

    function show(){

        document.getElementById('mybody').className = 'doing';

        document.getElementById('txt').innerHTML = '执行了摇一摇';

        setTimeout(function(){

            doing=0;

            document.getElementById('mybody').className='normal';

            document.getElementById('txt').innerHTML = '请执行摇一摇';

        },3000);

    }

    window.addEventListener("devicemotion", handleMotionEvent, true);

 </script>

</html>

html5实现摇一摇功能的更多相关文章

  1. html5实现微信摇一摇功能

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

  2. 用HTML5实现手机摇一摇的功能(转)

    在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: 1.devi ...

  3. Adobe Edge Animate --使用HTML5实现手机摇一摇功能

    Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...

  4. HTML5的DeviceOrientation实现微信摇一摇功能

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

  5. HTML5实现摇一摇的功能（实测后）--转

    eviceMotionEvent(设备运动事件)返回设备有关于加速度和旋转的相关信息.加速度的数据将包含三个轴:x,y和z(示意如下图所 示,x轴横向贯穿手机屏幕或者笔记本键盘,y轴纵向贯穿手机屏幕或 ...

  6. 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能

      介绍之前做两个声明: 以下代码可以直接运行,当然你别忘了引用jQuery才行. <script> // DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装, ...

  7. html5 DeviceOrientation来实现手机网站上的摇一摇功能

    原文地址:http://www.cootm.com/?p=706 从网上转载看到的,感觉不错,就转过来了,特此感谢 cnblogs 的 幸福2胖纸的码农生活,直接转载了,不要介意!呵呵 以下是转载内容 ...

  8. 使用Html5的DeviceOrientation特性实现摇一摇功能

    如今非常多的手机站点上也有类似于微信一样的摇一摇功能了,比方什么摇一摇领取红包,领取礼品等等 1,deviceOrientation:封装了方向传感器数据的事件,能够获取手机静态状态下的方向数据,如手 ...

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

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

随机推荐

  1. C# Mysql You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ????

    有几年没用过MySql数据了,今天在使用C#访问MySql数据库时出现了一个小插曲. 错误提示: You have an error in your SQL syntax; check the man ...

  2. Java泛型-内部原理: 类型擦除以及类型擦除带来的问题

    一:Java泛型的实现方法:类型擦除 大家都知道,Java的泛型是伪泛型,这是因为Java在编译期间,所有的泛型信息都会被擦掉,正确理解泛型概念的首要前提是理解类型擦除.Java的泛型基本上都是在编译 ...

  3. Python+Google Geocoding

    本文主要介绍使用Python调用Google Geocoding API进行地址到地理坐标的转换. Google Geocoding参考https://developers.google.com/ma ...

  4. rpm封装包,只用于记录自己过程，不适合初学者看，请看参考链接

    参考http://www.worldhello.net/2011/04/02/2405.html http://www.ibm.com/developerworks/cn/linux/manageme ...

  5. iOS支持Https

    http://oncenote.com/2014/10/21/Security-1-HTTPS/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_s ...

  6. HTML第三天作业做的表格

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  7. Java基础之OOP

    1. 类(类型)于对象 (1)面向过程的开发于面向对象开发的区别: 面向过程更重视流程化以及功能的开发,简单点来讲,就是按照固定的模式一步步按部就班的进行,最终达成一个功能的实现.这种模式叫做面向过程 ...

  8. 关于16年2月14日以后上传AppStore出现：Missing iOS Distribution signing identity for...的问题

    2016年2月14日以后打包上传AppStore会发现出现如下的问题: 导致问题的原因是:下边这个证书过期了 以下是苹果官方给出的回应: Thanks for bringing this to the ...

  9. C3属性的轮播图（持续更新）

    天气好冷,都不想写代码.就先写个没有焦点的轮播图,过两天在补全. 用的是CSS3的属性 过渡transition 和 转换 transfrom:translateX() 只做了轮播和 鼠标进入停止轮播 ...

  10. 纯JS实现中国行政区域上下联动选择地址

    一.实现目的: 如标题所述,通过JS来实现地址的选取,上一篇博客介绍的方式是通过java读取txt资源文件来实现地址的选择,通过ajax方式访问服务器实现省市区联动.此篇中将介绍如何使用JS实现相同功 ...