javascript - 根据 slider 值 flex 图像

Question

引用这篇文章:How to create image curved using css or jquery (See picture)和这个 JSFiddle:http://jsfiddle.net/AVRLv/

如何让图片也能拉伸(stretch)？不仅是盒子半径。

我希望能够通过 flex 程度的值来控制图像的 flex 形式。

我已经想出了如何更改图像的宽度和大小:

HTML

<p>
  <label for="amount">Trust Value:</label>
  <input type="text" id="amount" style="border:0; color:#ff0000; font-weight:bold;">
</p>
<div id="slider-range-max"></div>


<img src="http://www.discoposse.com/wp-content/uploads/2014/08/test-all-the-things.jpg" id="image"/>

Javascript

$(function() {
$( "#slider-range-max" ).slider({
  range: "min",
  min: 0,
  max: 10,
  value: 0,
  step: .001,
  slide: function( event, ui ) {
        $("#image").width(ui.value * 100);
        $("#image").height(ui.value * 50);
  }
});
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
  });

提前致谢!

静

Answer 1

将您创建的拉伸(stretch)效果与边框半径相结合可能会产生所需的效果。

您可以使用 jQuery 的 .css() 方法编辑图像的样式。

在这种情况下，您可以在 slider 的 slide 事件中使用它来动态更改图像的边框，使其看起来 flex 。

$(function() {
$( "#slider-range-max" ).slider({
  range: "min",
  min: 1,
  max: 10,
  value: 0,
  step: .001,
  slide: function( event, ui ) {
        $("#image").width(ui.value * 100);
        $("#image").height(200);
        $('#image').css('border-top-left-radius', '50% 15px')
        $('#image').css('border-top-right-radius', '50% 15px')
        $('#image').css('border-bottom-left-radius', '50% 15px')
        $('#image').css('border-bottom-right-radius', '50% 15px')
  }
  });
  $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
});

这是一个fiddle用上面的代码。当然，可以更改这些值以自定义效果。