重置 jQuery UI 滑块控点位置

resetting jquery ui slider handle position

本文关键字：位置 jQuery UI 重置      更新时间：2023-09-26

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

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

这是滑块的功能：

    $(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滑块的句柄回到它所属的位置......在滑块的中心:)

有人可以帮我吗？ 那将是伟大的:)

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

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

小提琴

你有很多冗余代码。也许实现以下功能会是更好的方法：

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）

相关文章：