Question

我有jquery ui滑块的情况。我有一个隐藏溢出的div中的图像，可以在div内部进行缩放和平移。滑块控制放大和缩小图像，问题是如果我点击重置或更改图像，处理程序将不会回到其初始位置（在滑块的中间）。

关注此实例：http://jsfiddle.net/omegaiori/QWfHE/3/embedded/result/ 使用滑块将IN放大到最大尺寸，然后点击重置按钮。发生的事情是图像缩小回原始大小，但无法再次放大。

这是滑块的功能：

    $(function () {
        $("#slider-vertical").slider({
            orientation: "vertical",
            range: "min",
            min: 0,
            max: 1000,
            value: 500,
            slide: function (event, ui) {
                var prevVal = $("#amount").val();
                var newVal = ui.value;
                if (prevVal > newVal) {
                    zoomOut();
                } else {
                    zoomIn();
                }

                $("#amount").val(ui.value);
            }
        });
        $("#amount").val($("#slider-vertical").slider("value"));
    });

我需要每次我的条件改变时（我改变图片，我点击重置或适合按钮），jquery ui滑块的手柄返回它所属的位置..在滑块的中心：）

有人可以帮帮我吗？那会很棒：）

Answer 1

使用以下行单击重置按钮时设置值：

$("#slider-vertical").slider('value', 500);

FIDDLE

Answer 2

你有很多冗余代码。也许这是一种更好的方法来实现像这样的函数：

function resize(factor) {
   // do the image resizing here and adjust all controls accordingly
}

然后从其他函数中调用此函数：

function zoomIn() {
    resize(1.05);
}

// etc...

这样，您确保每次图像和控件都处于一致状态。您可以使用$("#slider-vertical").slider('value', newposition);操纵滑块位置（您必须先计算newposition）

重置jquery ui滑块手柄位置

2 个答案: