Question

我一直在制作一个webgl游戏，并为chrome和firefox进行全屏切换。我一直在使用dat.gui作为这个游戏的控制输入。这是基于jQuery-ui。实际上，在触发全屏事件后，我无法显示任何子元素。行为是所有孩子都被清除，

:-webkit-full-screen {
    top:0px;
    position:absolute;
    width: 100% !important;
    background-color:red;
} 


:-moz-full-screen body {
  width: 100% !important;
   background-color:red;
}

:full-screen body{
    width: 100% !important;
    background-color:red;
}

#navi {
    position:relative;
    right:10px;
    top:10px;
}

使用这些元素，其中画布是动态创建的并附加到游戏CanCanDiv。而dat.gui被附加到'navi'。

<div id="gameCanvasDiv"></div>


<div id ="vSlider0"></div>
    <div id ="vSlider1"></div>

    <div id ="hSlider0"></div>

    <span id="navi" ></span>

我可以使用css在全屏后控制jQuery ui按钮的位置吗？我在这里围成一圈，所以任何建议或见解都会非常受欢迎。

Answer 1

您必须确保要显示的元素是gameCanvasDiv元素的子元素（假设您是请求全屏模式的元素）。

这意味着您需要将那些滑块放在那个滑块内。您可以使用CSS控制他们的位置，也可以使用JavaScript通过他们的属性来设置他们的位置（即，在全屏时设置一个类，在不是全屏时设置一个类 - 你会得到这个想法）。

通过使用z-index和绝对/固定位置，全屏可以帮助你将它们放在画布元素的顶部。

请注意，如果将元素放在画布顶部，则会降低canvas元素的性能。

覆盖jQuery按钮的全屏画布

1 个答案: