原理：使用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. Web API的Log问题

    建立了一个Web API项目,在WebApiConfig.cs中已经启用了Tracing. config.EnableSystemDiagnosticsTracing(); 同时web.config中 ...

  2. 情感分析的现代方法（包含word2vec Doc2Vec）

    英文原文地址:https://districtdatalabs.silvrback.com/modern-methods-for-sentiment-analysis 转载文章地址:http://da ...

  3. 数据转换成json传递

    //将奖励转换成json格式 _page.StrRewardToJson = function () { var hdReward = $("#hdReward").find(&q ...

  4. Math

    Math.sin(t)   // sin(t) Math.power(x,2*i)   // x的2i次方 (double)(Math.round(sum*1000000))/1000000;   / ...

  5. 转-servlet 获取 post body 体用流读取为空的问题

    目前基于rest风格的很多API开始使用通过body data来传输来代替之前的key-value传输方式.在Java servlet或者springmvc中可以通过如下代码来获取并图片通过流方式传输 ...

  6. FusionCharts制作报表使用XML导入数据时出现的中文乱码问题

    今天在使用FusionCharts制作报表时用XML导入数据,总是出现乱码问题,下面是我的解决方案. 让FusionCharts支持中文 刚刚将XML导入到html中后,在火狐浏览器一直报Invali ...

  7. Android版本4.0~7.0

    Android 4.0 Ice Cream Sandwich(冰激凌三明治):2011年10月19日发布 版本主要更新如下:全新的UI:全新的Chrome Lite浏览器:截图功能:更强大的图片编辑功 ...

  8. vue路由的简单实例

    vue2.0 和 vue1.0 路由的语法还是有点稍微的差别,下面介绍一下vue-router 2的简单实例: <!DOCTYPE html> <html lang="en ...

  9. SVN服务器与测试服务器代码同步

    在本地做测试项目的时候,想svn提交和服务器上的代码一步到位,不想再手动更新一次了,所以就研究了下同步, 要实现svn提交后自动更新到测试服务器,在你的版本库下的hooks文件夹下添加post-com ...

  10. phpstorm设置

    phpstorm版本为10.0.3,设置自动换行如下: 快捷方式: 打开新的文件:ctrl+shift+N 格式化:ctrl+alt+L 全局搜索:ctrl+shift+F 更换默认快捷键如下,其实右 ...