我想创建一个圆形div,当鼠标放在它上面时会变得更大(并停在鼠标上),但我似乎无法让它保持绝对居中在页面中当在调整大小的同时保持div中心位置
function addwidth() {
if ($(".circle").width() >= 550) {
$(".circle").width(100);
$(".circle").height(100);
$('.question input').val("1");
$(".circle").css("background-color", "red");
$(".circle").css("margin", "450px");
} else {
$(".circle").width($(".circle").width() + 5);
$(".circle").height($(".circle").height() + 5);
$(".circle").css('margin', function(index, curValue) {
return parseInt(curValue, 10) + -5 + 'px';
});
if ($(".circle").width() > 99) {
$('.question input').val("1");
$(".circle").css("background-color", "red");
}
if ($(".circle").width() > 199) {
$('.question input').val("2");
$(".circle").css("background-color", "orange");
}
if ($(".circle").width() > 299) {
$('.question input').val("3");
$(".circle").css("background-color", "yellow");
}
if ($(".circle").width() > 399) {
$('.question input').val("4");
$(".circle").css("background-color", "green");
}
if ($(".circle").width() > 499) {
$('.question input').val("5");
$(".circle").css("background-color", "blue");
} else {}
}
};
var intervalId;
function expand() {
if (intervalId) {
clearInterval(intervalId);
}
intervalId = setInterval(addwidth, 15);
};
function stopexpand() {
clearInterval(intervalId);
};
#container1 {
height: 100%;
width: 100%;
}
.circle {
background-color: black;
margin: 450px;
border-radius: 50%;
behavior: url(PIE.htc);
width: 100px;
height: 100px;
max-width: 550px;
max-height: 550px;
}
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<div id="container1">
<div class="circle" onmousedown="return expand()" onmouseup="return stopexpand()"></div>
<div class="question"><input type="number"></div>
</div>
我如何能确保圆向外扩展而不是向上或跨任何想法? (如果这是有道理的)
你想要[this](https://jsfiddle.net/3Lykkpr1/)吗? – Huelfe
我希望它从中心向外扩展。因此,如果我点击圆圈中间的位置,它会长大,但我的鼠标似乎仍然位于圆心的中心,而不是向外扩展的圆,鼠标位于圆的边缘。 – silverbackjack