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

Question

当我将鼠标拖到 div 上时，我希望 div 在它像锚点一样居中后调整大小，但我不知道 how.By 默认 "anchor point" 设置为左上

这是一个例子：

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

您可以在尺寸减小时增加边距。 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 2

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

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>

Answer 3

最干净 的方法是使用 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

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

How to move a div relative to its center(like an anchor point)?

html

javascript

css

anchorpoint