• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    html5摇一摇代码优化包括DeviceMotionEvent等等
    首先对DeviceMotionEvent进行优化;

    去除无用的代码,重新封装DeviceMotionEven

    复制代码
    代码如下:

    if(window.DeviceMotionEvent) {
    var speed = 25;//定义一个数值
    var x = y = z = lastX = lastY = lastZ = 0;//重置所有数值
    window.addEventListener('devicemotion', function(){
    var acceleration =event.accelerationIncludingGravity;//将传感值赋给acceleration
    x = acceleration.x;
    y = acceleration.y;
    z = acceleration.z;
    if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed ) {
    // TODO:在此处可以实现摇一摇之后所要进行的数据逻辑操作
    donghua();
    }
    lastX = x;
    lastY = y;
    lastZ = z;
    }, false);
    }

    由于实际项目中有很多需求无法很好的实现,

    比如:动画不执行完毕就不能继续执行DeviceMotionEvent事件;

    所以做了进一步优化;

    复制代码
    代码如下:

    var f=1;
    function donghua(){
    //动画事件
    $(".img").animate({left:'0',opacity:'1'},700,function(){f=1;});
    });
    if(window.DeviceMotionEvent) {
    var speed = 25;//定义一个数值
    var x = y = z = lastX = lastY = lastZ = 0;//重置所有数值
    window.addEventListener('devicemotion', function(){
    var acceleration =event.accelerationIncludingGravity;//将传感值赋给acceleration
    x = acceleration.x;
    y = acceleration.y;
    z = acceleration.z;
    if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed ) {
    // TODO:在此处可以实现摇一摇之后所要进行的数据逻辑操作
    if(f==1){
    donghua();
    f=0;
    }
    }
    lastX = x;
    lastY = y;
    lastZ = z;
    }, false);
    }

    现在就完美了
    上一篇:Html5 FileReader实现即时上传图片功能实例代码
    下一篇:让IE下支持Html5的placeholder属性的插件
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    html5摇一摇代码优化包括DeviceMotionEvent等等 html5,摇,一摇,代码,优化,