Question

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

如何让图片也拉伸？不仅是一个方圆半径。

我希望能够制作一个曲线形状的图像，可以控制它的弯曲程度。

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

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

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

您可以使用jQuery的.css()方法修改图片的样式。

在这种情况下，您可以在滑块的slide事件中使用它来动态改变图像的边框，使其看起来弯曲。

$(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。当然，可以更改值以自定义效果。

根据滑块值弯曲图像

1 个答案: