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

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