jQuery UI滑块调整图像大小

Question

我想制作一个jQuery UI滑块，它可以调整我的图像大小。 但是图像大小永远不会相同，所以我想根据比例调整百分比。 这是我到目前为止所做的：http://jsfiddle.net/Au3kk/

我尝试了这个，但它对事件不起作用：

 width :  ($(this).css('width')) + (ui.value + "%");

我是Javascript的新手我希望你不要和我一起努力。 非常感谢。

Answer 1

如何存储原始宽度：

var orginalWidth = $("#image").width();

然后使用：

$("#image").width(orginalWidth * (1 + ui.value/100));

jsfiddle

Answer 2

您需要从

修改此行

---

$("#image").css({ width : ($(this).css('width')) + (ui.value + "%"); });

---

到

 $('#image').css('width',ui.value+'%');

---

如果删除命令的最后一部分（+'％'），图像将以像素为单位调整大小。 请注意，百分比增加的值必须大于0（其中0表示不可见）但是它可以超过100％。在您的示例中，您将最小值设置为-50，最大值设置为50。

同样使用命令$(this).css，您尝试读取触发事件的元素的css（此实例中为滑块）而不是实际图像css