摇钱树效果

Posted 盖大楼

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了摇钱树效果相关的知识,希望对你有一定的参考价值。

$(function(){
    $(‘.t_back‘).click(function() {
        window.history.back();
    });
//    陀螺仪相关的变量
    var tl_flage=true;
//    重力感应器相关定义的变量
    var chaTime=5;
    var endTime,startTime,alpha,beta,gamma,delA,delB,delG,lastAcc;
    var zl_flage=true;
    //html5摇动API
    
    if(window.DeviceMotionEvent) {
        var SHAKE_THRESHOLD = 1200;
        var last_update = 0;
        var x, y, z, last_x, last_y, last_z;
        
        function deviceMotionHandler(eventData) {
            var acceleration = eventData.accelerationIncludingGravity;
            var curTime = new Date().getTime();
            if((curTime - last_update) > 300) {
                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;
                $(‘.p2‘).html(speed);
                if(speed > SHAKE_THRESHOLD) {
                    if(tl_flage) {
                        $(‘.jl_box‘).fadeIn();
                        tl_flage = false;
                    }
                }
                last_x = x;
                last_y = y;
                last_z = z;
            }
        }; 
        window.addEventListener(‘devicemotion‘, deviceMotionHandler, false);
    }else if(window.DeviceOrientationEvent){
    //    重力感应api
        window.addEventListener(‘deviceorientation‘,function(e){
//            开始的时间
            startTime=new Date();
            if(!lastAcc) {
                lastAcc = e;
                delA = parseInt( Math.abs(180-Math.abs(e.alpha) ) );
                delB = parseInt( Math.abs(90-Math.abs(e.beta) ) );
                delG = parseInt( Math.abs(90-Math.abs(e.gamma) ) );
            }else{
        //        设备指示的方向
                alpha = e.alpha,
        //      设备绕x轴旋转的角度
                beta = e.beta,
        //         设备绕y轴旋转的角度
                gamma = e.gamma;
                delA = parseInt( Math.abs( Math.abs(180-Math.abs(e.alpha)) - Math.abs(180-Math.abs(lastAcc.alpha)) ) );
                delB = parseInt( Math.abs( Math.abs(90-Math.abs(e.beta)) - Math.abs(90-Math.abs(lastAcc.beta)) ) );
                delG = parseInt( Math.abs( Math.abs(90-Math.abs(e.gamma)) - Math.abs(90-Math.abs(lastAcc.gamma)) ) );
            };
//            摇动时间差小于3可以触发
            if(chaTime<3){
                if( (delA > 15 && delB > 15) || (delA > 15 && delG > 15) || (delB > 15 || delG > 15) ) {
                    if(zl_flage){
                        $(‘.jl_box‘).fadeIn();
                        zl_flage=false;
                    };
                };
            };
            lastAcc = e;
//            结束的时间
            endTime=new Date();
//            快速摇动才可以触发的时间差值;
            chaTime=endTime-startTime;
        });
    }else{
        alert("您的浏览器不支持陀螺仪和重力感应器");
    };

    $(‘.jl_box_con_btn‘).bind(‘click‘,function(){
        $(‘.jl_box‘).fadeOut();
        tl_flage=true;
        zl_flage=true;
    });
})

1、orientation是重力感应api,获得的值与角度有关。

alpha是手机放在桌子上转。表示设备沿z轴上的旋转角度,范围为0~360。

beta是表示设备在x轴上的旋转角度,范围为-180~180。它描述的是设备由前向后旋转的情况。

gamma表示设备在y轴上的旋转角度,范围为-90~90。它描述的是设备由左向右旋转的情况。

2、devicemotion是陀螺仪api,手机有陀螺仪才能用这个。

  • x: 西向东,x轴的位置变化。
  • y: 南向北,y轴的位置变化。
  • z: 垂直地面,z轴的位置变化。

以上是关于摇钱树效果的主要内容,如果未能解决你的问题,请参考以下文章

P1987 摇钱树

vijos1574 摇钱树

摇钱树运营小工具UI设计.vsd

炫酷 CSS 背景效果的 10 个代码片段

常用的几个JQuery代码片段

12个用得着的 JQuery 代码片段