原文地址：http://www.cootm.com/?p=706

从网上转载看到的，感觉不错，就转过来了，特此感谢 cnblogs 的 幸福2胖纸的码农生活，直接转载了，不要介意！呵呵

以下是转载内容。

———————————————————

介绍之前做两个声明：

1、以下代码可以直接运行，当然你别忘了引用jQuery才行，我可提醒了，别到时候跑不起来骂我就成；

2、下面的实现思想参照了网上的一些文章，自己做了以下整理，对代码加入了一些注释说明，本人并非原创。

 <html lang="zh-CN">

 <head>

 <meta charset="utf-8" />

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

 <meta name="format-detection" content="telephone=no" />

 <title>摇一摇</title>

 <script src="js/jquery-1.9.1.min.js"></script>

 <script>

 // DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装，提供了DOM事件的支持。

 // 这个特性包括两个事件：

 // 1、deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据（手机所处的角度、方位和朝向等）。

 // 2、deviceMotion：封装了运动传感器的事件，可以获取手机运动状态下的运动加速度等数据。

 // 使用这两个事件，可以很能够实现重力感应、指南针等有趣的功能。

 // 现在在很多Native应用中有一个非常常见而时尚的功能 —— 摇一摇，摇一摇找人、摇一摇看新闻、摇一摇找金币。。。

 // 也许在android或者ios的客户端上对这个功能你已经很了解了，但是现在，我将告诉你如何在手机网页上实现摇一摇的功能。

 // OK，那我们现在就开始吧，嘿嘿~

 // 先来让我们了解一下设备运动事件 —— DeviceMotionEvent:返回设备关于加速度和旋转的相关信息，其中加速度的数据包含以下三个方向：

 // x：横向贯穿手机屏幕；

 // y：纵向贯穿手机屏幕；

 // z：垂直手机屏幕。

 // 鉴于有些设备没有排除重力的影响，所以该事件会返回两个属性：

 // 1、accelerationIncludingGravity(含重力的加速度)

 // 2、acceleration(排除重力影响的加速度)

 // 作为码农，上代码才是最直接的，come on，代码走起！

 // 首先在页面上要监听运动传感事件

 function init(){

 　　if (window.DeviceMotionEvent) {

 　　　　// 移动浏览器支持运动传感事件

 　　　　window.addEventListener('devicemotion', deviceMotionHandler, false);

 　　　　$("#yaoyiyaoyes").show();

 　　} else{

 　　　　// 移动浏览器不支持运动传感事件

 　　　　$("#yaoyiyaono").show();

 　　}

 }

 // 那么，我们如何计算用户是否是在摇动手机呢？可以从以下几点进行考虑：

 // 1、其实用户在摇动手机的时候始终都是以一个方向为主进行摇动的；

 // 2、用户在摇动手机的时候在x、y、z三个方向都会有相应的想速度的变化；

 // 3、不能把用户正常的手机运动行为当做摇一摇（手机放在兜里，走路的时候也会有加速度的变化）。

 // 从以上三点考虑，针对三个方向上的加速度进行计算，间隔测量他们，考察他们在固定时间段里的变化率，而且需要确定一个阀值来触发摇一摇之后的操作。

 // 首先，定义一个摇动的阀值

 var SHAKE_THRESHOLD = 3000;

 // 定义一个变量保存上次更新的时间

 var last_update = 0;

 // 紧接着定义x、y、z记录三个轴的数据以及上一次出发的时间

 var x;

 var y;

 var z;

 var last_x;

 var last_y;

 var last_z;

 // 为了增加这个例子的一点无聊趣味性，增加一个计数器

 var count = 0;

 function deviceMotionHandler(eventData) {

 　　// 获取含重力的加速度

 　　var acceleration = eventData.accelerationIncludingGravity; 

 　　// 获取当前时间

 　　var curTime = new Date().getTime();

 　　var diffTime = curTime -last_update;

 　　// 固定时间段

 　　if (diffTime > 100) {

 　　　　last_update = curTime; 

 　　　　x = acceleration.x;

 　　　　y = acceleration.y;

 　　　　z = acceleration.z; 

 　　　　var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; 

 　　　　if (speed > SHAKE_THRESHOLD) {

 　　　　　　// TODO:在此处可以实现摇一摇之后所要进行的数据逻辑操作

 　　　　　　count++;

 　　　　　　$("#yaoyiyaoyes").hide();

 　　　　　　$("#yaoyiyaoresult").show();

 　　　　　　$("#yaoyiyaoresult").html("摇你妹!第" + count + "个了！");

 　　　　}

 　　　　last_x = x;

 　　　　last_y = y;

 　　　　last_z = z;

 　　}

 }

 </script>

 </head>

 <body>

 <div id="yaoyiyaono" style="font-size:20px;margin:10px;line-height:35px;display:none;">

 　　兄弟，如果您看到了我，说明您现在还不能摇，不是说您没有资格用我，而是：</br>

 　　1、如果您使用PC机的浏览器，那可就不对了，我只爱手机浏览器；</br>

 　　2、如果您是Android手机，那不好意思告诉你，android自带的浏览器抛弃了我，您可以用UCWeb、chrome等第三方浏览器；</br>

 　　3、如果您都不属于以上两种情况，那我只有告诉您：您改换手机啦！！！</br>

 </div>

 <div id="yaoyiyaoyes" style="font-size:20px;margin:10px;line-height:50px;display:none;">

 　　兄弟，摇一个吧，说不定有一个清纯的妹子等着你呢!

 </div>

 <div id="yaoyiyaoresult" style="font-size:20px;margin:10px;line-height:50px;display:none;"></div>

 <script>

 $(document).ready(function(){

 init();

 });

 </script>

 </body>

 </html>
做了两个浏览地址，大家可以看看，第二个是华扬联众根据这个为蒙牛写的。
http://www.cootm.com/jobs/yaoyao.html  这个是上面代码的原型
http://www.cootm.com/jobs/index.html  这个是蒙牛的广告

html5 DeviceOrientation来实现手机网站上的摇一摇功能的更多相关文章

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

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

  2. HTML5的audio在手机网页上无法自动加载/播放音乐，能否实现该功能？

    在IOS中第一次调用play方法播放音频会被阻止,必须得等用户有交互动作,比如touchstart,click后才能正常调用,在微信中可以通过监听WeixinJSBridgeReady事件来提前播放一 ...

  3. [html5+java]文件异步读取及上传核心代码

    html5+java 文件异步读取及上传关键代码段 功能: 1.多文件文件拖拽上传,file input 多文件选择 2.html5 File Api 异步FormData,blob上传,图片显示 3 ...

  4. HTML5移动端手机网站开发流程

    基本上开发手机网站,可大致分为两大类.一类是用框架开发手机网站.一类是自己手写手机网站. 一.框架开发手机网站 一般用现在常用的开发框架有:目前Web前端最火的框架(BootStrap).jQuery ...

  5. HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（二）

    上一篇仅仅讲到前台操作,这篇专门涉及到Java后台处理.前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理.通过对图片数据信息进行Base64解码,之 ...

  6. DEDEcms手机网站添加详情内页上一页/下一页的翻页功能

    修改文件include/arc.archives.class.php文件. 1.搜索 function GetPreNext($gtype='') 2.将这个函数的所有内容替换为 function G ...

  7. 如何在电脑上测试手机网站（补充）和phonegap

    颜海镜 介绍了专业人士精准测试手机网站的经验 http://www.cnblogs.com/yanhaijing/p/3557261.html, 因为太专业了,稍显复杂和琐碎,这里我介绍下我一直关注的 ...

  8. [转] -- html5手机网站自适应需要加的meta标签

    webapp开发初期,会碰到在pc端开发好的页面在移动端显示过大的问题,这里需要在html head中加入meta标签来控制缩放 <meta name=" viewport" ...

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

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

随机推荐

  1. LaTeX手动安装宏包（package）以及生成帮助文档的整套流程

    注意:版权所有,转载请注明出处. 我使用的是ctex套装,本来已经自带了许多package,但是有时候还是需要使用一些没有预装的宏包,这时就需要自己安装package了.下载package可以从CTA ...

  2. Java IO复习 UDP

    客户端: package cn.zyw.javaurl; import java.io.IOException; import java.net.*; /** * Created by zyw on ...

  3. [Java] Java IO 概况

    Java IO 是 Java 的一套 API, 用于读入和写出数据(输入和输出).Java IO API 位于 java.io package.实际上 java.io package 没有解决所有的输 ...

  4. 使用Velocity 模板引擎快速生成代码

    Velocity 模板引擎介绍 在现今的软件开发过程中,软件开发人员将更多的精力投入在了重复的相似劳动中.特别是在如今特别流行的MVC架构模式中,软件各个层次的功能更加独立,同时代码的相似度也更加高. ...

  5. Javac编译和JIT编译

    编译过程 不论是物理机还是虚拟机,大部分的程序代码从开始编译到最终转化成物理机的目标代码或虚拟机能执行的指令集之前,都会按照如下图所示的各个步骤进行: 其中绿色的模块可以选择性实现.很容易看出,上图中 ...

  6. c++ 控制台流和字符串流

    前言 上一章节简单介绍c++中关于流的概念,这两章节将重点讲解如何使用,本章讲解控制台流和字符串流. 控制台输出流 输出流定义在头文件中,使用输出流最简单的方法就是 使用<<运算符.通过你 ...

  7. c#基础语言编程-文件流操作

    引言 在System.IO 命名空间下提供了一系列的类,我们可以通过相应的类进行文件.目录.数据流的操作. 1.File类:提供用于创建.复制.删除.移动和打开文件的静态方法.File类 2.File ...

  8. TFS(Team Foundation Server)介绍和入门

    在本文的两个部分中,我将介绍Team Foundation Server的一些核心特征,重点介绍在本产品的日常应用中是怎样将这些特性结合在一起使用的. 作为一名软件开发者,在我的职业生涯中,我常常会用 ...

  9. 开始lisp的旅程

    不知道是不是<黑客与画家>的老pual太能忽悠了,一直想把他吹捧的lisp学习一下. 看common lisp和On lisp两本书也有一段时间了,中间还夹着看了一点SICP和land o ...

  10. SPOJ DQUERY 求区间内不同数的个数 主席树

    这题跟HDU3333差不多吧. 离线的做法很简单,不再说了 以前做过. 主席树的做法就比较暴力了.. 什么是主席树呢.. 其实是某种称号. 在该题中的体现是可持久化的线段树. 对于一个数 如果以前没出 ...