移动端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() // 监视 ...
随机推荐
- asp.net 获取当前url地址
设当前页完整地址是:http://www.jb51.net/aaa/bbb.aspx?id=5&name=kelli "http://"是协议名 "www.jb5 ...
- oracle recyclebin详解(闪回删除的表)
今天在SOA应用数据库上运用DBMS_REDEFITION包进行在线非分区表转换分区表操作时,本想DROP掉建的临时表cube_scope_temp不小心后面忘记加"temp"直接 ...
- 基于java的InputStream.read(byte[] b,int off,int len)算法学习
public int read(byte[] b, int off, int len) throws IOException 将输入流中最多 len 个数据字节读入字节数组.尝试读取多达 len 字节 ...
- 配置nginx静态资源路径
1.修改nginx.conf文件 server节点下location节点的 root目录修改 location / { root html; index index.html index.htm; } ...
- SQL Server 找出值得优化的语句
方法 1. sys.dm_exec_qurey_stats 返回 SQL Server 中缓存查询计划的聚合性能统计信息. 缓存计划中的每个查询语句在该视图中对应一行, 并且行的生存期与计划本身相关联 ...
- NFC-P2P MODE
今日看见有关国内电信业者要合组TSM (Trusted Service Manager)提供NFC 服务的新闻, 这是属于NFC 所能提供的3种Mode中的Card emulation mode (就 ...
- MEMS陀螺仪(gyroscope)的结构
MEMS陀螺仪(gyroscope)的设计和工作原理可能各种各样,但是公开的MEMS陀螺仪均采用振动物体传感角速度的概念.利用振动来诱导和探测科里奥利力而设计的MEMS陀螺仪没有旋转部件.不需要轴承, ...
- c语言_常见图片格式判断
c语言_常见图片格式判断 我想尽各种思路.今天,终于把图片判断搞定了. 在此,我写一下我的思路.希望对那些不想看代码的朋友们有帮助. 常风的的图片格式有:bmp,png,jpg,gif等图片格式. 我 ...
- rand,randn,randi函数区别
1,rand 生成均匀分布的伪随机数.分布在(0~1)之间 主要语法:rand(m,n)生成m行n列的均匀分布的伪随机数 rand(m,n,'double')生成指定精度的 ...
- git 之别名配置
在git操作中有很多命令我们自己可以起别名,以提高操作效率. 1. 配置方式 1)项目级别的配置,仅对当前项目生效(将写入到.git/config文件中) $ git config --glob ...