原文地址：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. runtime/KVO等面试题

    整理中... 1.KVO内部实现原则 回答:1>KVO是基于runtime机制实现的 2>当某个类的对象第一次被观察时,系统就会在运行期动态地创建该类的一个派生类,在这个派生类中重写基类中 ...

  2. win7不能在同一窗口打开文件夹，解决办法

    1.由于IE浏览器的主页被劫持,总是忽然弹出搜狗的主页,有的时候,忽然弹出IE浏览器(主页是搜狗),然后又自行关闭,我X,我的电脑竟然不受我控制,这可得了,这里我又要骂宁美国度了,made,组装机装了 ...

  3. 关于python写GUI桌面应用的一些研究结果

    研究了一下python开发GUI桌面应用的解决方案,研究结果记录如下: EasyGui:控件极为简单,连个基本的grid.list组件都没有,不适合商用,甚至是普通的应用都不行,放弃! Tkinter ...

  4. MySQL 5.7版本安装教程-踩坑总结

    下载 MySQL下载地址 选择下载64位(看自己电脑是32位还是64位) 点击下载之后,它会让你登录,没有Oracle账户,跟着它的步骤注册一个就好了. 安装 打开下载好的压缩包解压到你的某一目录下, ...

  5. hadoop实例

    一篇讲得很好的hadoop实例,非常适合初学者学习hadoop. 本文转载自:http://www.cnblogs.com/xia520pi/archive/2012/06/04/2534533.ht ...

  6. hdu 2546 饭卡（DP）

    很久以前做过这道题,晚上睡不着,看见nyist加了一个DP的比赛,就进来打个酱油. 这道题的点睛之笔是将最大值记录下来,然后将其值改为0.之后就是普通的背包了. #include<stdio.h ...

  7. TreeComboBox控件范例

    本文转载:http://www.cnblogs.com/hoodlum1980/archive/2008/01/30/1058140.html 在我印象中有很多各种各样的自定义控件(例如TreeLis ...

  8. C#截取指定字符串函数

    本文转载:http://www.cnblogs.com/liufei88866/archive/2012/05/12/2497395.html 一.通过函数方式进行获取. public string ...

  9. CMake高速入门

    入门基础:http://www.ibm.com/developerworks/cn/linux/l-cn-cmake/       在 linux 下使用 CMake 构建应用程序 入门进阶:http ...

  10. Android bitmap图片处理

    一.View转换为Bitmap         在Android中所有的控件都是View的直接子类或者间接子类,通过它们可以组成丰富的UI界面.在窗口显示的时候Android会把这些控件都加载到内存中 ...