今早同事过来说.要做个小游戏.里面有个摇一摇动作. 平时都是做的手机营销h5比较少.  发现很有意思.  一时间没有反应过来. 怎么实现的摇一摇. 现在吧代码叠出来给2货的我.

//运动事件监听
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler,false);
}

//获取加速度信息
//通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率,进行设备是否有进行晃动的判断。
//而为了防止正常移动的误判,需要给该变化率设置一个合适的临界值。
var SHAKE_THRESHOLD = 8000;
var last_update = 0;
var x, y, z, last_x = 0, last_y = 0, last_z = 0;
function deviceMotionHandler(eventData) {
if(!$('#p2').hasClass('act')){
return false;
}
var acceleration =eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime-last_update)> 10) {
var diffTime = curTime -last_update;
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) {
  // anim();

  //去下一页, 执行系列的动画效果

  alert('摇一摇!写自己要执行方法function()')
}
last_x = x;
last_y = y;
last_z = z;
}
}

js摇一摇事件的更多相关文章

  1. 利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖

    摇一摇JS脚本逻辑:接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下: if (win ...

  2. 使用shake.js让你博客支持摇一摇

    大家好,又到了随机文章的时间,请使用手机打开演示站点,然后像摇妹子一样摇晃手机,你会发现非常牛逼的事情,炫酷吧.该功能已经集成在Oconnor1.8中.本文主要讲解这货的原理. 首先需要下载shake ...

  3. js微信摇一摇功能以及api

    一.摇一摇功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. shake.js实现微信摇一摇功能

    项目要求实现点击摇一摇图片,图片摇一摇,并且摇一摇手机,图片也要摇一摇. 关于用js怎样实现摇一摇手机图片摇一摇,我在网络上找了一些方法,真正有用的是shake.js. 接下来,上shake.js源码 ...

  5. js检测手机摇一摇

    1.检测设备是否支持重力感应事件deviceorientation deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角 function motionHandle ...

  6. js html5 仿微信摇一摇

    看微信摇一摇之后忽然想知道他是怎么写的.于是就在网上查了一些资料,有些是借鉴别人的.大家共同学习啊 先放代码 <body onload="init()"> <p& ...

  7. H5 DeviceMotionEvent 事件制作“摇一摇效果”

    摇一摇”的效果制作主要依赖于H5的deviceMotionEvent事件 先讲怎么使用,具体的原理在后边补充 第一步:捕捉重力加速度 var acceleration = eventData.acce ...

  8. H5+JS实现手机摇一摇功能

    在做微信活动页面的时候,经常会需要实现手机摇一摇功能,比如“摇一摇,拿好礼”. 为了实现它,就需要用到HTML5的DeviceOrientation特性.它提供的DeviceMotion事件封装了设备 ...

  9. 用js实现摇一摇功能

    function init(){ if (window.DeviceMotionEvent) { // 移动浏览器支持运动传感事件 window.addEventListener('devicemot ...

随机推荐

  1. Spring AOP源码分析(二):AOP的三种配置方式与内部解析实现

    AOP配置 在应用代码中,可以通过在spring的XML配置文件applicationContext.xml或者基于注解方式来配置AOP.AOP配置的核心元素为:pointcut,advisor,as ...

  2. codeforces round#524 C. Masha and two friends /// 矩形切割

    题目大意: 给定n行m列的黑白棋盘如下 给定矩形的左下点x1 y1和右上点x2 y2将这个区域都涂成白色 再给定矩形的左下点x3 y3和右上点x4 y4将这个区域都涂成黑色 求最后棋盘内有分别多少个白 ...

  3. java锁分析

    import java.util.concurrent.TimeUnit; class Phone//Phone.java ---> Phone.class Class.forName(); { ...

  4. springcloud(十六):服务网关zuul (2)

    Zuul的核心 Filter是Zuul的核心,用来实现对外服务的控制.Filter的生命周期有4个,分别是“PRE”.“ROUTING”.“POST”.“ERROR”,整个生命周期可以用下图来表示. ...

  5. eclipse新建maven项目和聚合项目

    1.new maven project :  next 2.勾选 create a simple project  :  next 3.Group Id:项目的包路径 如com.jiayou.zjl, ...

  6. 使用CSS3开启GPU硬件加速提升网站动画渲染性能

    遇到的问题: 网站本身设计初衷就没有打算支持IE8及以下版本浏览器,并不是因为代码兼容性问题,而是真的不想迁就那些懒得更新自己操作系统和浏览器的用户,毕竟是我自己的网站,所以我说了算!哈哈~ 没有了低 ...

  7. JS事件 卸载事件 当用户退出页面时(页面关闭、页面刷新等),触发onUnload事件,同时执行被调用的程序。注意:不同浏览器对onunload事件支持不同。

    卸载事件(onunload) 当用户退出页面时(页面关闭.页面刷新等),触发onUnload事件,同时执行被调用的程序. 注意:不同浏览器对onunload事件支持不同. 如下代码,当退出页面时,弹出 ...

  8. 神经网络 (1)- Alexnet

    文章目录 模型结构 conv1层 conv2层 conv3层 conv4层 conv5层 FC6全链接图: fc7全连接层:和fc6类似. fc8链接层: 模型优化 选择ReLU作为激活函数 多GPU ...

  9. Centos6 安装完之后,没有网络

    Virtualbox安装的centos 6.10的虚拟机,安装时,网络是NAT网络,安装完之后,将网络改为桥接网卡,启动虚拟机之后,使用 ifconfig 命令查看没有到eth0的信息,只有127.0 ...

  10. String = ""和String = null的区别

    在这要先说明下 String str;和String str=null;的关系,代码上来说两者几乎不差什么,但是这里String str=null;多了个指向空的引用 而String str ;却只是 ...