//        摇一摇动作

//获取加速度信息
//通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率,进行设备是否有进行晃动的判断。
//而为了防止正常移动的误判,需要给该变化率设置一个合适的临界值。
var SHAKE_THRESHOLD = 4000;
var last_update = 0;
var x, y, z, last_x = 0, last_y = 0, last_z = 0; function deviceMotionHandler(eventData) {
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) {
$('.slide_06_text').fadeOut();
$('.milk_01').animate({top:'0'},1000);
$('.milk_02').show().animate({bottom:'0'},2000);
$('.yao_tips_01').animate({top:'5%'},1500);
$('.yao_tips_02').show().animate({bottom:'5%'},2000);
setTimeout(function(){
$('.slide_06').fadeOut();
$('.slide_04').fadeIn();
},2500);
}
last_x = x;
last_y = y;
last_z = z;
}
}

移动端h5摇一摇事件的更多相关文章

  1. 移动端h5模拟长按事件

    为啥写这篇文章 最近接了个需求,要求长按某个标签显示删除一个悬浮的删除按钮.这个需求其实在app上很常见,但是在移动端h5中,我们没有长按的事件,所以就需要自己模拟这个事件了. 大概效果如下: ps: ...

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

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

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

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

  4. 利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换

    我比较喜欢听音乐,特别是周末的时候,电脑开着百度随心听fm,随机播放歌曲,躺在床上享受.但碰到了一个烦人的事情,想切掉不喜欢的曲子,还得起床去操作电脑换歌.于是思考能不能用手机控制电脑切换歌曲,经过一 ...

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

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

  6. js摇一摇事件

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

  7. H5实现摇一摇技术总结

    摇一摇遇到的问题 一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入 ...

  8. H5摇一摇遇到的问题

    一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入摇晃过程动画,就像 ...

  9. 用vue 写h5页面-摇一摇

    vue配合其他ui框架除了开发一个完整的web项目外,也有不少的项目做一些h5的活动页面开发.你的页面现在需要模拟微信的摇一摇动作. 项目环境: vue-cli 完成的一个项目 准备插件(包):依赖的 ...

  10. H5地理位置信息、微信摇一摇

    geolocation window.navigator.geolocation 1.getCurrentPosition() // 获取当前的位置信息 2.watchPosition() // 监视 ...

随机推荐

  1. 初识ege图形库

    简介: EGE (Easy Graphics Engine),是Windows 下的简易绘图库, 是一个类似BGI (graphics.h)的 面向C/C++语言新手的图形库,对新手来说,简单,友好, ...

  2. jdbc之二:DAO模式

    详细代码请参见 https://code.csdn.net/jediael_lu/daopattern 1.创建Dao接口. package com.ljh.jasonnews.server.dao; ...

  3. CentOS查看CPU、内存、网络流量和磁盘 I/O

    安装 yum install -y sysstat sar -d 1 1 rrqm/s: 每秒进行 merge 的读操作数目.即 delta(rmerge)/swrqm/s: 每秒进行 merge 的 ...

  4. drupal7创始人root忘记密码的解决办法

    在index.php中的drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);之后加入 require_once 'includes/password.inc'; echo ...

  5. python 序列类型

    1.不可变的序列类型:tuple.range.str.set 001:对于tuple 类型有如下几种构造方式 1.() 构造一个空的元组. 2.a | (a,) 构造一个只有一个元素的元组. 3.tu ...

  6. Starling开发微信打灰机(二)

    上一篇中,已经把starling开发环境搭建好,那么现在开始写代码. 这一篇来完成打灰机的欢迎界面. 游戏素材下载 首先创建Asset.as来加载图片,声音和字体等资源,其中只有两张背景图是单独的图片 ...

  7. C++的四种cast操作符的区别--类型转换

    Q:什么是C风格转换?什么是static_cast, dynamic_cast 以及 reinterpret_cast?区别是什么?为什么要注意? A:转换的含义是通过改变一个变量的类型为别的类型从而 ...

  8. C Statements

    1,while((ch = getchar()) != EOF){    putchar(ch);}2,while((ch=getchar()) != EOF){    if(ch < '0' ...

  9. 在SQL Server中如何快速查找DBCC命令和语法?

    DBCC命令非常好用,但是命令很多语法就很多,如何快速记忆呢?是否都要背下来.其实不用,只要能知道每个命令的作用并且记住DBCC HELP命令就可以了. --查找所有的DBCC命令 DBCC  HEL ...

  10. python中pip的使用和安装

    Ubuntu下安装pip的方法   安装pip的方法: Install pip and virtualenv for Ubuntu 10.10 Maverick and newer   $ sudo ...