我正在尝试使用 jQuery Ui slider 增加元素 (.inner
) 的宽度
。这在某种程度上工作正常但是我需要保持内部
的center
始终位于.wrapper
的中心。所以我认为我需要为 top
和 left
添加负值,但我不知道如何实现它们。我是否必须在那里创建两个自定义计数器,或者是否有更好的方法来实现此目的?
$(function() {
$("#slider").slider({
range: "max",
min: 300,
max: 1000,
value: 1,
slide: function(event, ui) {
$(".inner").css({
"width": ui.value,
"height": ui.value
});
}
});
});
body,
html {
height: 100%;
width: 100%
}
.wrapper {
position: relative;
height: 300px;
width: 300px;
border: 2px solid #999;
border-radius: 4px;
overflow:hidden;
}
.inner {
position: absolute;
width: 100%;
height: 100%;
display: -webkit-flex;
-webkit-align-items: center;
display: flex;
align-items: center;
justify-content: center;
background: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper ">
<div class="inner"> Center </div>
</div>
<br />
<div id="slider"></div>
最佳答案
由于div的宽度和 slider 的范围相同,因此我使用 slider 值来更改内部div的左侧和顶部位置。
这当然是可能的,因为它处于绝对
位置。
仅应用 slider 值的一半,因为要居中,您应该将更改拆分为左/右和上/下。显然,添加 right
或 bottom
css 属性是没有意义的,因为一个就足以正确定位元素。
$(function() {
var $inner = $(".inner");
var lastValue = 300;
$("#slider").slider({
range: "max",
min: 300,
max: 1000,
value: 300,
slide: function(event, ui) {
var curLeft = $inner.position().left;
var curTop = $inner.position().top;
var toAdd = (lastValue - ui.value) /2;
$inner.css({
"width": ui.value,
"height": ui.value,
"top": curTop + toAdd,
"left": curLeft + toAdd,
});
lastValue = ui.value;
}
});
});
body,
html {
height: 100%;
width: 100%
}
.wrapper {
position: relative;
height: 300px;
width: 300px;
border: 2px solid #999;
border-radius: 4px;
overflow:hidden;
}
.inner {
position: absolute;
width: 100%;
height: 100%;
display: -webkit-flex;
-webkit-align-items: center;
display: flex;
align-items: center;
justify-content: center;
background: #eee;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper ">
<div class="inner"> Center </div>
</div>
<br />
<div id="slider"></div>
关于javascript - 如何在 jQuery Ui Slider 中添加自定义增量和减量计数器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50785783/