码迷,mamicode.com
首页 > 移动开发 > 详细

移动端h5摇一摇事件

时间:2016-11-14 11:56:00      阅读:528      评论:0      收藏:0      [点我收藏+]

标签:判断   gravity   div   ati   timeout   dev   show   tip   top   

//        摇一摇动作

//获取加速度信息
//通过监听上一步获取到的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摇一摇事件

标签:判断   gravity   div   ati   timeout   dev   show   tip   top   

原文地址:http://www.cnblogs.com/djdliu/p/6060903.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!