当前位置：网站首页>图片随手机水平移动-陀螺仪。360度设置条件

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

2022-07-26 10:24:00 【唐策】

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

<!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>
原网站

版权声明
本文为[唐策]所创，转载请带上原文链接，感谢
https://tangce.blog.csdn.net/article/details/82456872

边栏推荐

猜你喜欢

随机推荐