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

Javascript - animate element to center of screen from any position

本文关键字：动画 屏幕 元素 任何 位置 Javascript      更新时间：2023-09-26

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

到目前为止，我有当前坐标、目标坐标和距离以及以度为单位的角度。它们正在以这种方式记录到控制台。

到目前为止，

我所拥有的东西：http://plnkr.co/edit/Oi517Hbat7WgIoOu0oFW

任何帮助将不胜感激。

使用 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 秒的时间范围内对向中心的移动进行动画处理

你在用jquery吗？

使用 .animate（），您可以告诉它根据 CSS 属性移动（从 http://api.jquery.com/animate/开始）

$( "#mydiv" ).animate({
  width: "70%",
  opacity: 0.4,
  marginLeft: "0.6in",
  fontSize: "3em",
  borderWidth: "10px"
}, 1500 );
相关文章：