移动端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;
            }
        }
时间: 2024-08-25 14:27:19

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

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

摇一摇JS脚本逻辑:接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下: if (window.DeviceMotionEvent) { window.addEventListener('devicemotion', handler, !1); lastTime = new Date(); } else { alert('你的浏览器不支持摇一摇功能.'); } devicemotion

摇一摇事件

html5新增了一个devicemotion的事件,可以使用手机的重力感应.如下代码所示: window.ondevicemotion = function(event){ var gravity = event.accelerationIncludingGravity; console.log(gravity.x, gravity.y, gravity.z); } x,y,z表示三个方向的重力加速度,如下图所示: x是手机短边,y是长边,z是和手机屏幕垂直的方向,当把手机平着放的时候,由于x.

H5实现的手机摇一摇

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <div id="status"></div> </body> <script> var shake=4000, last_update=0, count=0, x=y=z=

关于H5实现的手机摇一摇

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <div id="status"></div> </body> <script> var shake=4000, last_update=0, count=0, x=y=z=

iOS 摇一摇事件

我知道的摇一摇有以下2种方案: 一.直接用系统自带的motionBegan方法 -(void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event 假如程序不响应此方法,试着加入下面方法: -(BOOL)canBecomeFirstResponder { return YES; } 如果还不行,建议用第二种方法. 二.motionBegan+通知的方法 1.在Appdelegate里写motionBegan方法 -(void)

应用进入后台监测摇一摇事件&lt;转&gt;

原文地址:iOS使用CoreMotion实现摇一摇功能 现在网上介绍的iOS摇一摇功能,基本是以借助系统的ShakeToEdit功能来实现,什么是ShakeToEdit?看下图应该就能懂: 怎么实现?请看以下代码: [objc] view plain copy //ViewController 加入以下两方法 -(BOOL)canBecomeFirstResponder { //让当前controller可以成为firstResponder,这很重要 return YES; } -(void)m

蓝牙Ibeacon室内定位和微信摇一摇周边原理分析

苹果推出Ibeacon室内定位技术是为了弥补GPS无法覆盖室内定位这种场景.苹果意味着创新,在其推动下,蓝牙Ibeacon得到了极大的应用.而腾讯则是利用蓝牙Ibeacon在场景体验方面进行了创新,实现了微信摇一摇周边的功能,这在O2O领域有巨大的潜力. 对苹果和腾讯来说,Ibeacon都是应用创新,而不是技术创新. 本文分析Ibeacon室内定位和微信摇一摇的原理. 一.无线测距原理 无线信号都有一个信号强度(RSSI),蓝牙BLE自然也有.根据蓝牙BLE自身的发射功率(假设能够获取这个功率值

HTML5 摇一摇加强版之一次失败的探索

最近在看设备传感器的API,当然也少不了研究一下让微信称神的“摇一摇”了.关于“摇一摇”的实现,网上很多资料所以不详细说了,但总是有布局.效果不全等各种问题,所以作为一名资深copypaster,代码肯定是要贴的: 源码在此 核心代码是这一段: this.deviceMotionHandler = function(eventData) { var acceleration = eventData.acceleration; var curTime = new Date().getTime();

通过手机Web实现手机摇一摇的功能

经常我们玩微信都会用到查到附近的人,都是在app上实现手机摇一摇的功能.现在,我们将此技术搬移到手机web上,供大家学习,主要是用到HTML5的重要特性就是DeviceOrientation:官方文档 它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. deviceMotion:封装了运动传感器数据的事件,可以获取手机运动

(转)微信摇一摇优惠券

前段时间,接到一个需求说要搞个摇一摇优惠券,效果如下: 图一                                                图二                                                图三                                                     图四                                                 图五