原文地址：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. Ubuntu14.04 安装配置Hadoop2.6.0

    目前关于Hadoop的安装配置教程书上.官方教程.博客都有很多,但由于对Linux环境的不熟悉以及各种教程或多或少有这样那样的坑,很容易导致折腾许久都安装不成功(本人就是受害人之一).经过几天不断尝试 ...

  2. 400. Nth Digit

    这个EASY难度的题怎么感觉比H的还难,昨天没做出来,今天才做出来.. 呃啊..我生 气 啦.. 直接看的答案,耻辱. 1 digit: 1~9 总共1×9个 2 digits: 10~99 总共2× ...

  3. 单元测试时候使用[ClassInitialize]会该方法必须是静态的公共方法，不返回值并且应采用一个TestContext类型的参数报错的解决办法

    using Microsoft.VisualStudio.TestTools.UnitTesting; 如果该DLL应用的是 C:\Program Files\Microsoft Visual Stu ...

  4. C# richTextBox 重下往上依次查找关键字

    private void richTextBox1_SelectionChanged(object sender, EventArgs e) {     pos = richTextBox1.Sele ...

  5. Cubieboard 开箱和入门 | Name5566 分类： cubieboard 2014-11-08 17:27 251人阅读 评论(0) 收藏

    Cubieboard 开箱和入门 2014 年 01 月 29 日 by name5566 Categories: Computer Science, Cubieboard Hello Cubiebo ...

  6. MySQL内存体系架构及参数总结 ---图解

    http://www.cnblogs.com/kissdb/p/4009614.html 内存结构: Mysql 内存分配规则是:用多少给多少,最高到配置的值,不是立即分配 图只做大概参考 全局缓存包 ...

  7. linux 调度器配制参数

    http://blog.csdn.net/wudongxu/article/details/8574753 参数位置: /proc/sys/kernel/ 编绎内核时参数 [root@monitor ...

  8. 【Linux学习笔记】用nc实现两台主机间的文件传输（不需要输密码）

    通常,可以用scp完成两台主机间的文件传输任务,但在主机间未建立信任关系的情况下,scp每次都需要输入密码,用起来感觉不是很方便,之前这篇笔记介绍过不用输入密码执行脚本或传输文件的方法,但对于一些临时 ...

  9. YouTube CEO关于工作和生活平衡的完美回答

    原文地址:http://www.businessinsider.com/youtubes-ceo-response-to-work-life-balance-2015-7 译文: 在2015年Aspe ...

  10. Java基础知识强化之集合框架笔记34：List练习之集合的嵌套遍历

    1. 需求: 我们班有学生,每一个学生是不是一个对象.所以我们可以使用一个集合表示我们班级的学生.ArrayList<Student> 但是呢,我们旁边是不是还有班级,每个班级是不是也是一 ...