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

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

<!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>
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页