原理：使用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. 发现大量的TIME_WAIT解决办法

    存在一定的TIME_WAIT是正常的,个人认为如果超过了连接数的比例就不是很正常 服务器端与客户端建立TCP/IP连接后关闭SOCKET后,服务器端连接的端口状态变为TIME_WAIT.主动关闭的一方 ...

  2. linux 学习10 shell 基础

    10.1 Shell概述 .Shell是什么 Shell是一个命令行解释器,它为用户提供了一个向Linux内核发送请求以便运行程序的界面系统级程序,用户可以用Shell来启动.挂起.停止甚至是编写一 ...

  3. Backbone框架浅析

    Backbone是前端mvc开发模式的框架.它能够让view和model相分离,让代码结构更清晰简答,开发进度加快,维护代码方便.但是,现在出了一种mvvm框架,它是下一代前端mvc开发模式的框架,代 ...

  4. kendo ui 富文本编辑控件 Editor 实现本地上传图片，并显示

    富文本编辑的组件有很多,大名鼎鼎的KENDO UI中自然也有,但是默认功能中,只能包含网络图片, 而如果要实现本地上传图片,KENDO UI也提供了相应的功能,但必须实现KENDO规定的多个接口, 而 ...

  5. iOS开发 代码 或 <Home+Power>截屏

      1. 截屏的两种简单方法, 注意这两种截图方法,都必须在视图完全加载完成后才能截图,即在 viewDidAppear 方法之后截屏,否则无法得到想要的截屏效果 (1) 利用绘图方法 renderI ...

  6. android_demo之生成颜色布局

    前面学习了动态生成表格,不单单是要动态生成控件,也同时生成一个事件. 接下来用个小小栗子去了解这个知识点. <LinearLayout xmlns:android="http://sc ...

  7. linux 程序管理与SElinux

    此文涉及的命令:&.jobs.fg.bg.kill.nohup.ps.top.pstree.free.uname.uptime.netstat.dmesg.vmstat.fuser.lsof. ...

  8. SonarQube-5.6.3 代码分析平台搭建使用

    python代码分析 官网主页: http://docs.sonarqube.org/display/PLUG/Python+Plugin Windows下安装使用: 快速使用: 1．下载jdk ht ...

  9. sqlalchemy 大全

    SQLAchemy SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作,简言之便是:将对象转换成SQL,然后使用数据API执行S ...

  10. WebMethod在webservice里面非静态方法能调用，在页面类里面，静态方法才能调用

    WebMethod在webservice里面非静态方法能调用,在页面类里面,静态方法才能调用