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

【问题标题】：How to resize image using slider and resize property如何使用滑块和调整大小属性调整图像大小
【发布时间】：2018-07-08 22:43:58
【问题描述】：

我正在使用 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/

【问题讨论】：

我不完全确定您要完成什么。 rotateZ 只是，好吧，旋转，它与调整大小没有任何关系。也许您正在寻找transform:scale()？你能发一个minimal reproducible example吗？

标签： javascript jquery html css jquery-ui

【解决方案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

【讨论】：