Question

我想制作一个滑动到中心的滑块，同时在其他地方保持平滑动作。像现实生活中的扬声器平衡滑块的jQuery版本。有可能吗？

或者我应该用可拖动的对象创建我自己的滑块，收缩到包含它的一个轴的框架，捕捉到位于框架中心的另一个对象（或网格）？

编辑：我只需要一个允许值的滑块，例如从-10到-1,0和1到10（在-1和1之间捕捉到0），步长为：0.1

Answer 1

您应该可以使用jQuery滑块，但使用slide event限制其动作：

jSlider.slider({
    // other options...
    slide: function (event, ui) {
        if (ui.value > -1 && ui.value < 1 && ui.value != 0) {
            // force it to 0 between -1 and 1.
            jSlider.slider('value', 0); 
            return false;
        }
        return true;
    }
});

Answer 2

嗯...所以这就是我想象中的东西......一个像旋转木马一样在计时器上滑动的背景（也许这些是大图像），顶部有一排缩略图，滑动平滑。你想要建立什么？

编辑：这是你需要做的事情：

我很少发现需要使用jQuery插件。这就是你需要的：

Mousedown（在滑块上）。 api.jquery.com/mousedown/。鼠标按下释放时会有回调。
在拖动滑块时跟踪滑块容器内的鼠标位置docs.jquery.com/Tutorials:Mouse_Position
使用animate功能在鼠标尚未释放时移动滑块api.jquery.com/animate/在发布时停止动画。
当滑块到达其容器中的某个x位置时，强制使用“平滑”功能 - 即不同的动画功能。

Answer 3

使用以下命令，以便您的jquery滑块自动捕捉到步骤中最近的滑块。诀窍是实现自己的step-interval-slider。问题是，如果您的最大值和最小值相隔一小段距离（例如5-10），则幻灯片将按步骤运行，因为默认步长= 1，因此您需要根据该步骤计算步数。如果您的最大最小值之间有一个很大的距离（例如1-1000或更高），您可以保留computed_step计算并将其初始化为1.

       max_limit = 30;
       min_limit = 5;
       stick_to_steps_of = 5;
       var computed_step = max_term/100; //you can vary the denominator to make it smoother
        $("#my_slider" ).slider({
            animate : true,
            value: max_limit,
            min: min_limit,
            max: max_limit,
            step: computed_step,
            stop: function( event, ui ) {
                d = parseInt(parseInt(ui.value)/stick_to_steps_of);
                rem = parseInt(ui.value)%stick_to_steps_of;
                var fval = 0;
                if (rem <= parseInt(stick_to_steps_of/2)) {
                    fval = d*stick_to_steps_of;
                }else{
                    fval = (d+1)*stick_to_steps_of; 
                }
                $("#my_slider").slider('option', 'value', fval); 
                $('#myslider_current_value').html(fval);  //some placeholder to show the current value
            }
        });

jQuery UI：一个快照的滑动滑块（默认值）？

3 个答案: