Question

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

我现在要做的是用垂直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 );
}

将jquery ui slider与我现有的缩放图像的脚本集成在一起

1 个答案: