0

当我将鼠标拖到一个 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>

4

3 回答 3

2

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

阅读更多：

于 2018-08-23T11:13:45.900 回答
0

当尺寸减小时，您可以增加边距。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)";
}
于 2018-08-23T11:07:57.387 回答
0

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

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>

于 2018-08-23T11:10:16.930 回答