Question

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

到目前为止，我有当前坐标，目标坐标和距离以及以度为单位的角度。他们正在登录到控制台。

到目前为止我所拥有的东西： 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秒的时间范围内动画移动到中心

Answer 2

你正在使用jquery吗？

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

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

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

2 个答案: