jQuery Slider-速度越来越快

jQuery Slider - Getting faster

本文关键字：越来越 速度 Slider- jQuery      更新时间：2023-09-26

我知道如何使用jQuery滑块，但不知道该怎么做。

我希望你把手柄向右滑动得越远，的宽度就越快。

例如。如果我滑动到滑块的第1步，div的宽度将连续增加5px。如果我滑动到滑块的第2步，div的宽度将连续增加10px。

提前感谢

编辑：到目前为止，我有这个，但这显然是不对的。我不太确定从这里去哪里：

$( ".sliderh" ).slider({
  value:1,
  min: 1,
  max: 200,
  slide: function( event, ui ) {
      horizontalVal = ui.value
    $('.square').css('width', horizontalVal)
  }
});

如果你想让滑块的值以指数形式增加，你只需要决定它的某种指数格式。比如horizontalVal = Math.pow(horizontalVal, 2)。如果div增加得太慢或太快，只需调整即可。例如，您可以执行horizontalVal = Math.pow(horizontalVal/2, 2)。

编辑：

像这样的东西怎么样：

var increase;
var interval;
$( ".sliderh" ).slider({
  value:1,
  min: 1,
  max: 200,
  slide: function( event, ui ) {
      increase = ui.value;
      }
});
$(".sliderh").mousedown(function(e){
    interval = setInterval(function(){
        $('.square').css('width', $('.square').width() + increase);
    }, 200);
});
$(".sliderh").mouseup(function(e){
    clearInterval(interval);
});

您可以调整间隔长度（当前设置为200ms）和增量大小（当前仅设置为滑块的值）以更改效果。现在，当你每200毫秒按下鼠标一次滑块的值时，它就会增加，向右滑动得越远，每个间隔增加得越多。

相关文章：