我有一个 Javascript 函数，用于摇动屏幕大约一秒钟。
function shakeScreen() {
var degrees = 0;
var goal = 0;
var goals = [5,-5,4,-4,3,-4,2,-2,1,-1,0];
function frame() {
if(goals[goal] < 0) {
degrees -= 1;
} else {
degrees += 1;
}
get('body','tag');
current[0].style.transform = 'rotate(' + degrees + 'deg)';
if(degrees === goals[goal]) {
goal += 1;
if(goal === goals.length) {
clearInterval(intervalId);
}
}
}
var intervalId = setInterval(frame,16);
}
在我的 HTML 正文中，我的第一个元素有一个固定的位置。此元素是一个向用户显示消息的弹出窗口，它有一个固定位置，因此如果最终用户向下或向上滚动页面，它会出现在屏幕上的相同位置。这是 HTML 的片段:
<body>
<div id='fade' onclick="fade('out')"><div id='alert'></div></div>
<!-- more unrelated content -->
这是上面指定元素的 CSS:
#fade {
z-index: 2750;
position: fixed; /*important*/
display: none;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: rgba(0, 0, 0, 0);
text-align: center;
}
#fade:hover {
cursor: pointer;
}
当执行 Javascript 函数 shakeScreen() 时，fade 元素会错位并移动到主体的顶部，而不是留在最终用户屏幕的中央。这是 JSFiddle:https://jsfiddle.net/turkey3/ug9zx1d2/3/向下滚动一半，您会看到一个按钮。单击该按钮可摇动屏幕。您会注意到瞬间，fade 元素开始出现在屏幕中央，但在开始晃动后移动到顶部。此外，要查看我想要的效果，请注释掉设置函数内的 shakeScreen 函数，然后运行代码。
编辑:fade 元素只是一个深色背景。 alert 元素是一个白框，其中包含向用户显示的消息。
最佳答案
解决方案
我发现最好的方法不是旋转 body 元素，而是将所有其他代码包装在一个 div 中并摇动分区而不是整个 body。之后，提示信息正确显示在屏幕中央。这是固定代码:https://jsfiddle.net/turkey3/ug9zx1d2/4/
这是包装在 div 中的 HTML:
<body>
<div id='fade' onclick="fade('out')"><div id='alert'></div></div>
<div id='shake'>
<!-- more unrelated content -->
</div>
并更新了 JS:
function shakeScreen() {
var degrees = 0;
var goal = 0;
var goals = [5,-5,4,-4,3,-4,2,-2,1,-1,0];
function frame() {
if(goals[goal] < 0) {
degrees -= 1;
} else {
degrees += 1;
}
get('shake','id');
current.style.transform = 'rotate(' + degrees + 'deg)';
if(degrees === goals[goal]) {
goal += 1;
if(goal === goals.length) {
clearInterval(intervalId);
}
}
}
var intervalId = setInterval(frame,16);
}
关于javascript - HTML - 影响固定元素的主体旋转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31395203/