gpt4 book ai didi

javascript - 平滑的 jquery Ui slider 有 5 个步骤

转载 作者:行者123 更新时间:2023-12-01 02:05:09 24 4
gpt4 key购买 nike

我正在开发一个项目,其中有几个 jq UI slider 。我有一个特殊的,只有 5 个步骤。这是fiddle这是片段(第一个 fiddle 和片段):

$(function() {
$( "#slider" ).slider({
min: 1,
range: false,
max: 5,
value: 1,
animate:"slow",
orientation: "horizontal",
slide: function( event, ui ) {
$(".value").text("slider value: " + ui.value);
}
});
});
body {
padding: 0px;
margin: 0px;
background-color: #333;
color: #FFF;
font-family: arial;
font-size: 20px;
}
.slider-holder {
padding: 15px;
margin: 0px;
}
.value {
margin: 15px 0px 0px 0px;
display: inline-block;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<div class="slider-holder">
<div id="slider"></div>
<a class="value">slider value: 1</a>
</div>
</body>
</html>

我想要像这样平滑地滑动 jsfiddle和这个片段(第一个 fiddle 和片段):

$(function() {
$( "#slider" ).slider({
min: 1,
range: false,
max: 1000,
value: 1,
animate:"slow",
orientation: "horizontal",
slide: function( event, ui ) {
$(".value").text("slider value: " + ui.value);
}
});
});
body {
padding: 0px;
margin: 0px;
background-color: #333;
color: #FFF;
font-family: arial;
font-size: 20px;
}
.slider-holder {
padding: 15px;
margin: 0px;
}
.value {
margin: 15px 0px 0px 0px;
display: inline-block;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<div class="slider-holder">
<div id="slider"></div>
<a class="value">slider value: 1</a>
</div>
</body>
</html>

我希望当用户单击并按住 slider handle 并移动 handle 时,它应该像 fiddle 和片段 2 一样清晰地移动。但它只有 5 个值。
我该怎么做?

最佳答案

给你:P

 $(function() {
$( "#slider" ).slider({
min: 1,
range: false,
step: .0001,
max: 5,
value: 1,
animate:"slow",
orientation: "horizontal",
slide: function( event, ui ) {
$(".value").text("slider value: " + Math.round(ui.value));
}
});
});

顺便说一句,如果您想要更平滑的效果,请选择步骤:.001。

关于javascript - 平滑的 jquery Ui slider 有 5 个步骤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35779994/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com