如何使用滑块和resize属性调整图像大小

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!')}});

});

Link到jsfiddle