Javascript - 将元素从任何位置动画到屏幕中心

Question

我有一个红色 div，用户可以在屏幕上的任何位置单击并拖动它。灰色 div 相对于红色 div 定位，并随着红色 div 的移动而自动更新。使用鼠标滚轮滚动应该会导致红色 div(以及随后的灰色 div)从它们所在的任何位置移动到窗口中心，然后停止。

到目前为止，我已经有了当前坐标、目标坐标、距离以及 Angular (以度为单位)。它们正被记录到控制台。

到目前为止我所拥有的东西: http://plnkr.co/edit/Oi517Hbat7WgIoOu0oFW

如有任何帮助，我们将不胜感激。

Answer 1

使用 document.body.clientWidth 获取浏览器窗口的宽度，使用 document.body.clientHeight 获取高度，然后将 div 设置为中心，即: -

var mydiv = document.getElementById('mydivid');
mydiv.top = ((parseInt(document.body.clientHeight) / 2) - (parseInt(myDiv.Height) / 2)) +'px';
mydiv.left = ((parseInt(document.body.clientWidth) / 2) - (parseInt(myDiv.Width) / 2)) +'px';

如果你想让它“滑行”到中心，你可以在 CSS 中添加一些变换样式

    div.#mydiv {
    -webkit-transition: all 1.0s ease-in-out;  
    -moz-transition: all 1.0s ease-in-out;  
    -o-transition: all 1.0s ease-in-out;  
    -ms-transition: all 1.0s ease-in-out;  
    transition: all 1.0s ease-in-out;  
}

在 1 秒的时间范围内动画移动到中心