Question

我有一个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（）时，淡入淡出元素变得不对齐并移动到正文的顶部而不是保留在最终用户屏幕的中心。这是JSFiddle：https://jsfiddle.net/turkey3/ug9zx1d2/3/向下滚动，你会看到一个按钮。单击该按钮可以摇动屏幕。您会注意到分裂 淡入淡出元素开始出现在屏幕中央，但随后它会在开始摇动后移动到顶部。另外，要查看我希望它是什么，请注释掉安装功能中的shakeScreen功能，然后运行代码。

编辑淡化元素只是一个黑暗的背景。 alert 元素是一个白色框，其中包含向用户显示的消息。

Answer 1

<强>解决方案

我发现最好的方法是，而不是旋转 body 元素，是将所有其他代码包含在div中并且摇动分区而不是整个身体。之后，警报消息正确显示在屏幕中央。以下是固定代码：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);
}

HTML - 影响固定元素的身体轮换

1 个答案: