移动端h5摇一摇事件
// 摇一摇动作 //获取加速度信息
//通过监听上一步获取到的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摇一摇事件的更多相关文章
- 移动端h5模拟长按事件
为啥写这篇文章 最近接了个需求,要求长按某个标签显示删除一个悬浮的删除按钮.这个需求其实在app上很常见,但是在移动端h5中,我们没有长按的事件,所以就需要自己模拟这个事件了. 大概效果如下: ps: ...
- H5 DeviceMotionEvent 事件制作“摇一摇效果”
摇一摇”的效果制作主要依赖于H5的deviceMotionEvent事件 先讲怎么使用,具体的原理在后边补充 第一步:捕捉重力加速度 var acceleration = eventData.acce ...
- h5手机摇一摇功能实现:基于html5重力感应DeviceMotionEvent事件监听手机摇晃
DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信 ...
- 利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
我比较喜欢听音乐,特别是周末的时候,电脑开着百度随心听fm,随机播放歌曲,躺在床上享受.但碰到了一个烦人的事情,想切掉不喜欢的曲子,还得起床去操作电脑换歌.于是思考能不能用手机控制电脑切换歌曲,经过一 ...
- 利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖
摇一摇JS脚本逻辑:接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下: if (win ...
- js摇一摇事件
今早同事过来说.要做个小游戏.里面有个摇一摇动作. 平时都是做的手机营销h5比较少. 发现很有意思. 一时间没有反应过来. 怎么实现的摇一摇. 现在吧代码叠出来给2货的我. //运动事件监听if ...
- H5实现摇一摇技术总结
摇一摇遇到的问题 一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入 ...
- H5摇一摇遇到的问题
一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入摇晃过程动画,就像 ...
- 用vue 写h5页面-摇一摇
vue配合其他ui框架除了开发一个完整的web项目外,也有不少的项目做一些h5的活动页面开发.你的页面现在需要模拟微信的摇一摇动作. 项目环境: vue-cli 完成的一个项目 准备插件(包):依赖的 ...
- H5地理位置信息、微信摇一摇
geolocation window.navigator.geolocation 1.getCurrentPosition() // 获取当前的位置信息 2.watchPosition() // 监视 ...
随机推荐
- 初识ege图形库
简介: EGE (Easy Graphics Engine),是Windows 下的简易绘图库, 是一个类似BGI (graphics.h)的 面向C/C++语言新手的图形库,对新手来说,简单,友好, ...
- jdbc之二:DAO模式
详细代码请参见 https://code.csdn.net/jediael_lu/daopattern 1.创建Dao接口. package com.ljh.jasonnews.server.dao; ...
- CentOS查看CPU、内存、网络流量和磁盘 I/O
安装 yum install -y sysstat sar -d 1 1 rrqm/s: 每秒进行 merge 的读操作数目.即 delta(rmerge)/swrqm/s: 每秒进行 merge 的 ...
- drupal7创始人root忘记密码的解决办法
在index.php中的drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);之后加入 require_once 'includes/password.inc'; echo ...
- python 序列类型
1.不可变的序列类型:tuple.range.str.set 001:对于tuple 类型有如下几种构造方式 1.() 构造一个空的元组. 2.a | (a,) 构造一个只有一个元素的元组. 3.tu ...
- Starling开发微信打灰机(二)
上一篇中,已经把starling开发环境搭建好,那么现在开始写代码. 这一篇来完成打灰机的欢迎界面. 游戏素材下载 首先创建Asset.as来加载图片,声音和字体等资源,其中只有两张背景图是单独的图片 ...
- C++的四种cast操作符的区别--类型转换
Q:什么是C风格转换?什么是static_cast, dynamic_cast 以及 reinterpret_cast?区别是什么?为什么要注意? A:转换的含义是通过改变一个变量的类型为别的类型从而 ...
- C Statements
1,while((ch = getchar()) != EOF){ putchar(ch);}2,while((ch=getchar()) != EOF){ if(ch < '0' ...
- 在SQL Server中如何快速查找DBCC命令和语法?
DBCC命令非常好用,但是命令很多语法就很多,如何快速记忆呢?是否都要背下来.其实不用,只要能知道每个命令的作用并且记住DBCC HELP命令就可以了. --查找所有的DBCC命令 DBCC HEL ...
- python中pip的使用和安装
Ubuntu下安装pip的方法 安装pip的方法: Install pip and virtualenv for Ubuntu 10.10 Maverick and newer $ sudo ...