javascript - 将 jquery ui 滑块与我现有的缩放图像的脚本集成

Question

我实现了这个javascript，可以让你放大和缩小图像到一个固定宽度的div，并隐藏溢出。我最初用两个简单的按钮（增加/减少）来实现它，点击时会增加或减少所包含图像的宽度。

我现在想做的是用垂直 jquery ui 滑块替换按钮，但我不知道该怎么做。

这是我的起点：http: //jsfiddle.net/omegaiori/QWfHE/embedded/result/

基本上放大/缩小属性是通过以下代码获得的：

    function zoomIn() {
    var imgElem = jQuery(".image");
    width = width*1.1;
    height = height*1.1;
    imgElem.css({"width": width + "px", "height": height + "px"});
    imgElem.draggable("option", {"axis": false, "containment": false}).draggable("enable");
}

function zoomOut() {
    var imgElem = jQuery(".image");
    width = width/1.1;
    height = height/1.1;
    imgElem.css({"width": width + "px", "height": height + "px"});
    imgElem.draggable("option", {"axis": false, "containment": false}).draggable("enable");
}

有人可以帮忙吗？？那太酷了:)提前谢谢

Answer 1

http://jsfiddle.net/bhilleli/QWfHE/1/ 你的例子几乎就在那里。只需将其用作幻灯片功能：

slide: function( event, ui ) {
           var prevVal=$( "#amount" ).val();
           var newVal=ui.value;
            if (prevVal>newVal) {
               zoomOut();   
            } else {
               zoomIn();   
            }

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