Question

全屏模式的图标（看起来大致像一组护目镜，可能是50％透明灰色和纯白色），当通过桌面查看时，它总是位于浏览器屏幕的右下角。

定位是这样的，尽管可能会发生破坏性行为，例如更改窗口大小，按下以调出控制台，或者改变相机角度，图标的位置是固定的。

这是如何实现的？

我想构建一个类似的元素（矩形会很好）并将它定位在稳定的位置（可能是底部中心），当应用程序以“桌面”模式运行时，它可以被鼠标点击通过遮阳板或纸板观看。该应用程序显示360张照片。

编辑:(为清楚起见，删除了原始问题的一部分，扩展了问题，以获得有关正确使用CSS的更多详细信息）

ngokevin发布的答案建议使用CSS。

我已成功使用CSS和HTML以及简单的JavaScript情况。在AFRAME环境中使用它时遇到了麻烦。

在下面的示例中，有几次尝试更改“bottom”属性，但它没有效果。（尝试使用id而不是class，使用答案中提供的文字字符串，使用绝对或不使用其他各种东西。）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS/AFRAME Test</title>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>

  <style>
    .plane { position:absolute; bottom: 100px ! important;}  
  </style>
</head>

<body>
  <a-scene>
    <a-plane class="plane"
       height="1"
       width="3" 
       position="0 0 -4"
       material="color: red">
    </a-plane>    

    <a-camera fov="100" look-controls></a-camera>
</a-scene>

更改“bottom”的值无效。例如，是否有可能使这个矩形始终使用CSS拥抱中心底边？

是否可以显示上面的编辑，以便CSS用于影响任何属性，以便我可以看到并播放一个工作示例？

如果“plane”元素需要是2D HTML，我们如何设置重叠a-scene？

Answer 1

这只是CSS。您可以覆盖它（例如，leal (%edi, %edi, 8), %edi leal (%edi, %edi, 4), %eax (to be returned)）

Answer 2

我以为我会发一个简单的例子。现在我已经完成了它，看起来非常明显，即使它不是我第一次问的时候。

该示例使用两个“固定”定位的“p”标签。当鼠标悬停在任一标签上时，会调用一个函数来获取＆amp;设置属性。 Z-Index值用于确保“P”标签出现在a场景上方。

因为我是HTML / CSS的新手，所以我不得不阅读一些有关定位的内容。 Positioning上的MDN链接以及之后的“实际定位示例”部分非常有用。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS/AFRAME Interaction Test</title>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>

  <style>
    p {
      font-size: 24pt;
      text-align: center; 
      width: 35px;
      height: 35px;
      color: white;
      background-color: grey;
      opacity: 0.5;
      position: fixed;
      bottom: -10px;  
      z-index: 1;
    }

    .foo {
      left: 20px;
    }  

    .bar {
      left: 56px;
    }  
  </style>

  <script>
    function recolorPlane() {
      var plane = document.querySelector("#plane");
      var currentColor = plane.getAttribute('material').color;
      if (currentColor == "red") {
        plane.setAttribute('material', {color: 'blue'});
      } else {
        plane.setAttribute('material', {color: 'red'});
      }
    }
  </script>

</head>

<body>
  <p class="foo" onmouseover="recolorPlane()">+</p>
  <p class="bar" onmouseover="recolorPlane()">-</p>

  <a-scene>
    <a-sky material="color: #DDF"></a-sky>
    <a-plane id="plane" height="1" width="3" 
        position="0 0 -4" material="color: blue">
    </a-plane>
  </a-scene>
</body>
</html>

<aframe>全屏图标如何保持在右下角？

2 个答案: