Question

当我在div上拖动鼠标时，我希望该div像锚点一样居中后重新调整大小，但是我不知道如何。默认情况下，“锚点”设置为左上

这里是一个例子：

var x = document.getElementById('mydiv');
x.onmouseover = function() {
  res_in(this.id);
};
x.onmouseout = function() {
  res_out(this.id);
};

function res_in(id) {
  document.getElementById(id).style.width = '70px';
  document.getElementById(id).style.height = '70px';
}

function res_out(id) {
  document.getElementById(id).style.width = '100px';
  document.getElementById(id).style.height = '100px';
}

.mydiv {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: aqua;
  border-radius: 100px;
  transition: all 0.3s ease;
}

<div class="mydiv" id="mydiv">

</div>

Answer 1

最干净的方法是使用transform。您可以使用scale函数来调整大小。默认的变换原点在中间，但是如果您想使用css的transform-origin属性，可以更改它，它的工作原理与您描述的完全相同-这是变换的锚点。

此外，您不需要示例中的JS。这是一个工作正常的示例：

#mydiv {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: aqua;
  border-radius: 50%;
  transition: transform 0.3s ease;
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
  -ms-transition: transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
}

#mydiv:hover {
  background-color: red;
  transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -o-transform: scale(0.7);
}

<div id="mydiv"></div>

了解详情：

MDN transform-origin property

Answer 2

当尺寸减小时，可以增加边距。 https://jsfiddle.net/sfxLb7en/52/

var x = document.getElementById('mydiv');
x.onmouseover = function(){res_in(this.id);};
x.onmouseout = function(){res_out(this.id);};
function res_in(id)
{
document.getElementById(id).style.width = '70px';
document.getElementById(id).style.height = '70px';
document.getElementById(id).style.margin = '15px';
}
function res_out(id)
{
document.getElementById(id).style.width = '100px';
document.getElementById(id).style.height = '100px';
document.getElementById(id).style.margin = '0px';
}

或仅使用transform：scale（）https://jsfiddle.net/sfxLb7en/53/

var x = document.getElementById('mydiv');
x.onmouseover = function(){res_in(this.id);};
x.onmouseout = function(){res_out(this.id);};
function res_in(id)
{
document.getElementById(id).style.transform="scale(0.7)";
}
function res_out(id)
{
document.getElementById(id).style.transform="scale(1)";
}

Answer 3

最简单的方法是将元素的边距更改为大小的一半：

var x = document.getElementById('mydiv');
x.onmouseover = function() {
  res_in(this.id);
};
x.onmouseout = function() {
  res_out(this.id);
};

function res_in(id) {
  document.getElementById(id).style.width = '70px';
  document.getElementById(id).style.height = '70px';
  document.getElementById(id).style.margin = '15px';
}

function res_out(id) {
  document.getElementById(id).style.width = '100px';
  document.getElementById(id).style.height = '100px';
  document.getElementById(id).style.margin = '0px';
}

.mydiv {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: aqua;
  border-radius: 100px;
  transition: all 0.3s ease;
}

<div class="mydiv" id="mydiv">

</div>

如何相对于其中心（如锚点）移动div？

3 个答案: