如何使用滑塊和調整大小屬性調整圖像大小

Question

我正在使用jquery ui滑塊，並且希望用戶能夠使用滑塊使用resize屬性來調整圖像大小。 我不確定如何使它工作。 任何建議或想法將不勝感激。

  jQuery("#slider2").slider({
        value: 0,
        max: 360,
        min: 0,
        slide: function(event, ui) {

            jQuery(".resize-image").css({
              'resize': 'rotateZ('+ui.value+'deg)',
              '-moz-transform': 'rotateZ('+ui.value+'deg)',
              '-o-transform': 'rotateZ('+ui.value+'deg)',
              'transform': 'rotateZ('+ui.value+'deg)',
            })
   }
});

https://jsfiddle.net/davadi/8dw0c4an/9/

Answer 1

使用onclick函數可獲取滑塊的值，並使用該值從圖像的寬度中增加或減少。

$(function () {
var pre_val = 0;
$("#slider-range-min").click(function(){
    var val = $('#slider-range-min').slider("option", "value");

  var width_img = $(".bgSizeContain").width()
  if(val>pre_val){
    width_img += val
  } else {
    width_img -= val
 }
        pre_val = val;

$(".bgSizeContain").width(width_img)
    })
$("#slider-range-min").slider({change: function(event, ui) {console.log('It Works!')}});

});

鏈接到jsfiddle