当前位置：网站首页>The picture moves horizontally with the phone - gyroscope. 360 degree setting conditions

The picture moves horizontally with the phone - gyroscope. 360 degree setting conditions

2022-07-26 13:41:00 【Tangce】

explain ：
The first one is ： Simple version
Get the horizontal movement degree of the mobile phone 

<!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 = ' Your browser does not support gyroscopes '; } </script>
</html>

The second kind ： Complex version
Pictures move horizontally with the phone - gyroscope .360 Degree setting conditions
1. The initial position is the center , Turn left and right 90 degree , The picture is complete .
2. You can set the distance between the initial position of the picture and the center （ The main position part of the initial display picture ）
var changeDeg90 = wrap_translateX / full_bgimgW; // initial , Offset degrees from the center 

<!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"> Watch the panorama </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> //  Panorama - gyroscope  var flag=true; var firstAngle = 0; var instance = 0; var tuoluo = false;// Prevent event listening  function deviceorientation(wrap_translateX) {
      //  Panorama - gyroscope  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; // Record first value  flag = false; } var full_bgimgW = ($(".full-bgimg").width() - $(window).width()) / (2 * 90); // Every movement distance  var translateZ = parseInt(Math.round(instance) * full_bgimgW) + wrap_translateX; var changeDeg90 = wrap_translateX / full_bgimgW; // initial , Offset degrees from the center  /*1. According to the initial value firstAngle, Angle position judgment */ if (firstAngle > 90 && firstAngle < 270) { /*2. According to the offset angle greater than 90 degree , Judge */ 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) { /* according to alpha The current position ,225 Degree is the critical point , Judge */ 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) { /* according to alpha The current position ,135 Degree is the critical point , Judge */ 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(" Initial degree ：" + firstAngle + " Current degrees ：" + alpha + " Degree of deviation from the center " + changeDeg90 + " Offset distance " + translateZ + " Every degree px" + full_bgimgW) // $(".translateZ").html(translateZ); // if(instance > 0 && instance < 90){
      $(".p6fullView-wrap").css({ 'transform': 'translateX(' + translateZ + 'px)' }) // } } }, false); } else { document.querySelector('body').innerHTML = ' Your browser does not support gyroscopes '; } } </script>
</html>
原网站

版权声明
本文为[Tangce]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/207/202207261024001335.html

边栏推荐

猜你喜欢

随机推荐