1
我一直在尋找UI滑塊,它會改變多個DIV值,但找不到甚至接近我想要的值。我沒有技術能力從頭開始。有人可以幫忙嗎?具有多個DIV值的JQuery UISlider
此圖片描述了我正在尋找的東西。隨着用戶滑行,多個DIV會發生變化。
我一直在尋找UI滑塊,它會改變多個DIV值,但找不到甚至接近我想要的值。我沒有技術能力從頭開始。有人可以幫忙嗎?具有多個DIV值的JQuery UISlider
此圖片描述了我正在尋找的東西。隨着用戶滑行,多個DIV會發生變化。
您可以通過編寫自己的滑塊功能通過jQuery的滑塊來實現。在這個例子中,文本在50%處改變。如果需要,您可以根據價值調整定位。
$(function() {
$(".sli3").slider({
range: "min",
value: 50,
min: 0,
max: 100,
slide: function(event, ui) {
if (ui.value<50) {
$(".div-1").text("yay");
$(".div-2").text("whoo");
} else {
$(".div-1").text("example text 1");
$(".div-2").text("example text 2");
}
$(".div-1").css({top:ui.value + "%"})
}
});
});
.div-1 {
position:fixed;
top:50px;
left:200px;
}
.div-2 {
position:fixed;
top:100px;
left:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="sli3"></div>
<div class="div-1"></div>
<div class="div-2"></div>
謝謝你這麼多的擡頭。我根據你的代碼創建了一個JSFiddle。我想增加更多的價值,但我無法這樣做。我哪裏錯了?另外,在JS代碼中,第20行是什麼?我在這裏評論過它:https://jsfiddle.net/gr68e514/ –
更新:我可以設置一個範圍,但我無法得到值顯示20以下。第8-11行之間的行號isn不工作:https://jsfiddle.net/zombhbsp/1/ –
@ElaineByene https://jsfiddle.net/zombhbsp/4/更新了一個else-if。第20行是爲了證明你可以用滑塊移動位置。 – Neil