图片随手机水平移动-陀螺仪。360度设置条件

2018-09-06 10:54:38 1762 收藏 1
分类专栏： 移动端 文章标签： 图片随手机水平移动-陀螺仪
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29132907/article/details/82456872
版权

说明：
第一种：简单版本
获取手机水平移动度数

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body{
      overflow: hidden;
    }
    .wrap{
      position: relative;
      width: 100%;
      height: 100%;
      position: relative;
      transform: translate3d(0px, 0px, 0px);
      transform-style: preserve-3d;
      backface-visibility: hidden;
    }
    .bgimg{
      position: absolute;
    }
  </style>
</head>
<body>
alpha:<span id="alpha"></span><br/>
beta:<span id="beta"></span><br/>
gamma:<span id="gamma"></span><br/>
<p class="translateZ">trarslateZ</p>
<div id="wrap" class="wrap">
  <img class="bgimg" src="bgimg.png" alt="">
</div>
</body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', function (event) {
    var a = document.getElementById('alpha'),
      b = document.getElementById('beta'),
      g = document.getElementById('gamma'),
      alpha = event.alpha,
      beta = event.beta,
      gamma = event.gamma;

    a.innerHTML = Math.round(alpha);
    b.innerHTML = Math.round(beta);
    g.innerHTML = Math.round(gamma);
    var translateZ=parseInt(Math.round(gamma)*10);
    $(".translateZ").html(translateZ);
    $(".wrap").css({
      'transform':'translateX('+translateZ+'px)'
          // 'transform': 'translateX(10px)'
    })
  }, false);
} else {
    document.querySelector('body').innerHTML = '你的浏览器不支持陀螺仪';
}
</script>
</html>

第二种：复杂版本
图片随手机水平移动-陀螺仪。360度设置条件
1.初始位置为中心，左右各转90度，图片显示完整。
2.可以设置图片初始位置距离中心的距离（初始显示图片的主要位置部分）
var changeDeg90 = wrap_translateX / full_bgimgW; //初始，距离中心偏移度数

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
.p6-wrap{
    width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  overflow: hidden;
}
.p6fullView-wrap{
  position: relative;
  width: 100%;
  height: 100%;
  position: relative;
  transform: translate3d(0px, 0px, 0px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.p6fullView-close-btn{
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
}
.p6fullView-wrap-text{
  position: absolute;
  z-index: 2;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.full-bgimg{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /*width: 81.2rem;*/
  /*height: 37.5rem;*/
  /*width: 6867px;*/
  width: 343.5rem;
  height: 100%;
}
  </style>
</head>
<body>
alpha:<span id="alpha"></span><br/>
beta:<span id="beta"></span><br/>
gamma:<span id="gamma"></span><br/>
<p class="translateZ">trarslateZ</p>
<div class="p6-wrap">
  <span class="p6fullView-close-btn">X</span>
    <div class="p6fullView-wrap-text">
      《
      <span class="full_bgimgW">观看全景</span>
      》
    </div>
  <div class="p6fullView-wrap">
    <img class="full-bgimg" src="full-bgimg.jpg" alt="">
  </div>
</div>
</body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
// 全景图-陀螺仪
var flag=true;
var firstAngle = 0;
var instance = 0;
var tuoluo = false;//阻止事件监听

function deviceorientation(wrap_translateX) {
  // 全景图-陀螺仪
  var flag = true;
  var firstAngle = 0;
  var instance = 0;
  if (window.DeviceOrientationEvent) {
    window.addEventListener('deviceorientation', function(event) {
      if (tuoluo) {
        var alpha = event.alpha,
          beta = event.beta,
          gamma = event.gamma;
        if (flag) {
          firstAngle = alpha; //记录第一次值
          flag = false;
        }
        var full_bgimgW = ($(".full-bgimg").width() - $(window).width()) / (2 * 90); //每一度移动距离
        var translateZ = parseInt(Math.round(instance) * full_bgimgW) + wrap_translateX;
        var changeDeg90 = wrap_translateX / full_bgimgW; //初始，距离中心偏移度数

        /*1.根据初始值firstAngle，角度位置判断*/
        if (firstAngle > 90 && firstAngle < 270) {
          /*2.根据偏移角度大于90度，判断*/
          if (alpha - firstAngle + changeDeg90 > 90) {
            var full_bgimgW = ($(".full-bgimg").width() - $(window).width()) / 2;
            $(".p6fullView-wrap").css({
              'transform': 'translateX(' + full_bgimgW + 'px)'
            });
          } else if (alpha - firstAngle + changeDeg90 < -90) {
            var full_bgimgW = ($(".full-bgimg").width() - $(window).width() * (-1)) / 2;
            $(".p6fullView-wrap").css({
              'transform': 'translateX(' + full_bgimgW + 'px)'
            });
          } else {
            if (alpha > firstAngle) {
              instance = Math.abs(alpha - firstAngle);
            } else {
              instance = alpha - firstAngle;
            }
          }
        } else if (firstAngle < 90 && firstAngle > 0) {
          /*根据alpha当前位置，225度为临界点，判断*/
          if (alpha > firstAngle && alpha < 225) {
            if (alpha - firstAngle + changeDeg90 > 90) {
              var full_bgimgW = ($(".full-bgimg").width() - $(window).width()) / 2;
              $(".p6fullView-wrap").css({
                'transform': 'translateX(' + full_bgimgW + 'px)'
              });
            } else {
              instance = Math.abs(alpha - firstAngle);
            }
          } else if (alpha < firstAngle && alpha > 0) {
            if (alpha - firstAngle + changeDeg90 < -90) {
              var full_bgimgW = ($(".full-bgimg").width() - $(window).width() * (-1)) / 2;
              $(".p6fullView-wrap").css({
                'transform': 'translateX(' + full_bgimgW + 'px)'
              });
            } else {
              instance = Math.abs(alpha - firstAngle) * (-1);
            }
          } else if (alpha < 360 && alpha > 225) {
            if ((alpha - 360 - firstAngle + changeDeg90) < -90) {
              var full_bgimgW = ($(".full-bgimg").width() - $(window).width() * (-1)) / 2;
              $(".p6fullView-wrap").css({
                'transform': 'translateX(' + full_bgimgW + 'px)'
              });
            } else {
              instance = Math.abs(alpha - 360 - firstAngle) * (-1);
            }

          }
        } else if (firstAngle < 360 && firstAngle > 270) {
          /*根据alpha当前位置，135度为临界点，判断*/
          if (alpha < firstAngle && alpha > 135) {
            if (alpha - firstAngle + changeDeg90 < -90) {
              var full_bgimgW = ($(".full-bgimg").width() - $(window).width() * (-1)) / 2;
              $(".p6fullView-wrap").css({
                'transform': 'translateX(' + full_bgimgW + 'px)'
              });
            } else {
              instance = Math.abs(alpha - firstAngle) * (-1);
            }
          } else if (alpha > firstAngle && alpha < 360) {
            if ((alpha - firstAngle + changeDeg90) > 90) {
              var full_bgimgW = ($(".full-bgimg").width() - $(window).width()) / 2;
              $(".p6fullView-wrap").css({
                'transform': 'translateX(' + full_bgimgW + 'px)'
              });
            } else {
              instance = Math.abs(alpha - firstAngle);
            }
          } else if (alpha < 135 && alpha > 0) {
            if ((360 - firstAngle + alpha + changeDeg90) > 90) {
              var full_bgimgW = ($(".full-bgimg").width() - $(window).width()) / 2;
              $(".p6fullView-wrap").css({
                'transform': 'translateX(' + full_bgimgW + 'px)'
              });
            } else {
              instance = Math.abs(360 - firstAngle + alpha);
            }
          }
        }

        $(".full_bgimgW").html("初始度数：" + firstAngle + "当前度数：" + alpha + "距离中心偏离度数" + changeDeg90 + "偏移距离" + translateZ + "每一度px" + full_bgimgW)
        // $(".translateZ").html(translateZ);
        // if(instance > 0 && instance < 90){
        $(".p6fullView-wrap").css({
          'transform': 'translateX(' + translateZ + 'px)'
        })
        // }
      }
    }, false);
  } else {
    document.querySelector('body').innerHTML = '你的浏览器不支持陀螺仪';
  }
}
</script>
</html>
已标记关键词 清除标记
条件表达式a?b:c是什么意思
唐策的博客
11-01 6万+
a?b:c是什么意思这个是条件表达式,表示如果a为真,则表达式值为b,如果a为假,则表达式值为c 条件表达式具体说明如下条件语句： if(a>b) max=a; else max=b; 可用条件表达式写为 max=(a>b)?a:b;执行该语句的语义是：如a>b为真,则把a赋予max,否则把b 赋予max. 使用条件表达式时,还应注意以下几点：1) 条件运算符的运算优先级低于关系运算符和
表情包
插入表情
还能输入1000个字符
相关推荐
html5调用手机陀螺仪实现方向辨识
10-08 456
获取移动设备的陀螺仪，需要知道陀螺仪包含什么。 我们可以让document监听deviceorientation 来获取相关的数据，里面包括3个值 alpha、beta和gamma。 这三个值分别代表： （1）alpha： 移动设备水平放置时，绕z轴旋转的角度，数值为0度到360度。 （2）beta： 移动设备水平放置时，绕X轴旋转的角度，数值为-180度到180度...
加速度计和陀螺仪指南
我们的时光！
05-16 5518
本指南旨在向兴趣者介绍惯性
Unity3D中手机陀螺仪的使用
雁回晴空的博客专栏
11-18 2万+
使用手机陀螺仪，可以获取手机的3D姿态，这在开发中是很有用的。当然现在的手机内置的陀螺仪都是比较廉价的，精度不高，但是作为实验设备看看效果还是可以的。本文将给出调用手机陀螺仪的简单方法。        首先，我们需要在场景中添加大量方块，作为观察对象。        控制陀螺仪的脚本： using UnityEngine; using System.Collections
react vr禁用手机陀螺仪的方法
liu__520的博客
08-16 3114
react vr中文网：www.vr-react.com react vr qq群：481244084 示例源码 github：https://github.com/LiuC520/ReactVR/ 现在的react vr(1.4.0以前）还不支持带触摸屏而不带陀螺仪的电脑哦。 鉴于最近有人需要禁用手机的陀螺仪，让react vr能不跟着手机的旋转而旋转，只需要滑动手机
如何得到android手机垂直运动的距离？
06-26
我想先用传感器得到竖直方向上的加速度，然后两次积分之后得到运动距离，这样可行吗？android的传感器精度能不能满足？ 最早使用一个加速度传感器求竖直方向上的加速度，不知道为何不论手机向上或者向下，得
MATLAB模拟陀螺仪的运动轨迹（附完整代码）
weixin_44271141的博客
05-27 1613
本文讲述了陀螺仪运动轨迹的分析过程，并且通过MATLAB进行仿真。 正传 反转 第一步：建立坐标系 假设陀螺仪是由框架（frame）和转子（rotor）两部分组成，O点和C点分别表示陀螺仪的两端，0坐标系为地面，1坐标系和2坐标系表示OC的方向（角度分别用α和β表示），3坐标系表示陀螺仪的框架（角度用δ表示），4坐标系表示陀螺仪的转子（角度用γ表示）。 第二步：提出假设 陀螺仪的质量是平均分布的 任意部位截面的半径都相同 转子为一个实心圆柱体 忽略所有的摩擦力 重力加速度为9.8 m/s^2 第三步
Pannellum：实例之在部分视角内展示全景图
KaiSarH的博客
11-12 483
实例之在部分视角内展示全景图
视角
intelyx的博客
03-29 228
Win32坐标系 2016年3月16日 23:15             那个默认坐标系是永远存在的
视点视觉-源码
02-10
Create React App入门 该项目是通过。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在
关于LCD的视角
reille的笔记
09-17 6235
视角简单地说就是显示图案能看得清楚的角度。它是由定向层的摩擦方向决定，不能通过旋转偏光片改变。视角以时针的钟点来命名，如6:00视角，12:00视角等等。6:00视角就是指在6点时针的平面方向到法线方向这个区域LCD显示效果理想；12:00视角是指12点时针的平面到法线方向区域显示理想。
陀螺仪与里程计不匹配度的自动判定方法
XiaoxingChen's blog
02-11 1204
背景 移动机器人底盘两个重要的上传参数就是底盘的里程(x,y,θ)(x,y,θ)(x, y, {\theta})和陀螺仪的θθ{\theta}角，即yaw角。处于各种原因，比如陀螺仪失效、轮子打滑、底盘运动参数配置错误等问题，可能导致这两个传感器上传的yaw角会发生短时间地，或微小地不匹配的情况。为了快速定位问题发生的时刻，本文解释了一种判定两者不一致的方式。其基本原理为两个时间序列的相似性分析...
threejs 使用陀螺仪实现手机端全景
凌风子夜
09-20 1129
在threejs中实现全景的方式有多种，其中有天空盒子，贴图反缩放，还有CSS3DRenderer渲染。 **方法：**CSS3DRenderer使用六幅图片绘制一个立方体盒子，将视角放置在其中，根据陀螺仪控制方向，移动视角。 首先两个引用包： <script src="js/controls/DeviceOrientationControls.js"></script&g...
HTML5 控制手机陀螺仪
Ryan
09-30 3365
监听deviceorientation window.addEventListener('deviceorientation', function(event) { var alpha = event.alpha; var beta = event.beta; var gamma = event.gamma; }, false); HTML alpha:&lt;span id=...
Android设备中实现Orientation Sensor(图)兼谈陀螺仪
beeboobeeboo的专栏
06-10 2万+
设备中的三自由度Orientation Sensor就是一个可以识别设备相对于地面，绕x、y、z轴转动角度的感应器(自己的理解，不够严谨)。智能手机，平板电脑有了它，可以实现很多好玩的应用，比如说指南针等。   我们可以用一个磁场感应器(magnetic sensor)来实现。   磁场感应器是用来测量磁场感应强度的。一个3轴的磁sensor IC可以得到当前环境下X、Y和Z方向上的磁场感
krpano全景之移动手机端默认加载开启陀螺仪
ZT的专栏
01-18 4395
上接前几篇做的小demo，我现在需要在加载的时候默认开启陀螺仪（默认是不开启的），在tour.xml文件中开启陀螺仪之后会出现相应的陀螺仪的按钮，但是默认是关闭的。我们现在想让其默认开启。 首先在tour.xml文件中开启陀螺仪。  gyro="true" 然后去skin/tourskin.xml文件中找到 <plugin name="skin_gyro" keep="true" ur
html5的陀螺仪
现在学习也不晚
06-16 9725
获取移动设备的陀螺仪，需要知道陀螺仪包含什么。 我们可以让document监听deviceorientation 来获取相关的数据，里面包括3个值 alpha、beta和gamma。 这三个值分别代表： （1）alpha： 移动设备水平放置时，绕z轴旋转的角度，数值为0度到360度。 （2）beta： 移动设备水平放置时，绕X轴旋转的角度，数值为-180度到180度。
图片随手机姿态变化上下左右移动
WittyLu的博客
10-25 1841
图片随手机姿态变化发生四个方向上的移动，通过SENSOR_ORIENTATION传感器检测手机角度变化，当手机右边抬起角度大于10度就会向左移动，反之向右移动，当手机向上抬起角度超过10度，则图片朝上移动，反之朝下移动一定距离。 1、MainActivity.java package com.example.imagesensordrag; import android.os.Bun
【verge3D】为web3D开启陀螺仪功能
zjbcool
08-16 725
我想要实现在v3d中通过陀螺仪控制相机的方向，在v3d的示例中，我找到了misc_controls_deviceorientation.html，这是官方实现这个功能的示例。示例在SDK中，由于v3d是基于three.js的，在three.js官网的示例中有对应的演示： https://threejs.org/examples/#misc_controls_deviceorientation ...
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页