//        摇一摇动作

//获取加速度信息
//通过监听上一步获取到的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. D - Specialized Four-Digit Numbers

    Description Find and list all four-digit numbers in decimal notation that have the property that the ...

  2. auto 和 decltype (C++11 新增)

    红色字体为个人推断,可信度自辨. 蓝色字体为重点. auto类型说明符:使用auto时,编译器会分析表达式,并自动推算出变量所属类型.*auto变量必须有初值 原理:编译器通过 初值 来判断auto变 ...

  3. PHP读取CSV大文件导入数据库的示例

    对于数百万条数据量的CSV文件,文件大小可能达到数百M,如果简单读取的话很可能出现超时或者卡死的现象. 为了成功将CSV文件里的数据导入数据库,分批处理是非常必要的. 下面这个函数是读取CSV文件中指 ...

  4. 如何使用NODEJS+REDIS开发一个消息队列

    作者: RobanLee 原创文章,转载请注明: 萝卜李 http://www.robanlee.com MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应 ...

  5. 正确合理的建立MYSQL数据库索引

    写在前面:索引对查询的速度有着至关重要的影响,理解索引也是进行数据库调优的起点.考虑如下情况,假设数据库中一个表有10^6条记录,DBMS的页面大小为4K,并存储100条记录.如果没有索引,查询将对整 ...

  6. javascript 给关键字加链接

    var keys = { "和尚":["http://www.baidu.com","#ff0000"], "系统":[ ...

  7. python 文件移动(shutil)

    # encoding=utf-8 # /home/bergus/tongbu/360共享/编程语言 # /home/bergus/桌面 # /home/bergus/test/hh import os ...

  8. 1041. Be Unique (20)

    Being unique is so important to people on Mars that even their lottery is designed in a unique way. ...

  9. UVA 1572 Self-Assembly

    拓扑排序,以边上标号为点,正方形为边,拓扑图中存在有向环时unbounded,否则bounded: 注意:仔细处理输入:   遍历一个点时,下一次遍历拼上的下一个方形边:即假设遍历到 A+ 时,下次从 ...

  10. python学习day1

    python简单介绍: Python的创始人为Guido van Rossum.1989年圣诞节期间,在阿姆斯特丹,Guido为了打发圣诞节的无趣,决心开发一个新的脚本解释程序,做为ABC 语言的一种 ...