[英]jQuery UI slider to resize image
I would like to make a jQuery UI slider wich resize my image size. 我想制作一个jQuery UI滑块,以调整图像大小。 However the image size is never the same so I would like to resize with percentage respecting the ratio.
但是,图像大小永远都不相同,因此我想根据比例调整大小。 Here is what I've done so far : http://jsfiddle.net/Au3kk/
这是我到目前为止所做的: http : //jsfiddle.net/Au3kk/
I tried this but it doesn't work on the event : 我尝试了这个,但是在事件上不起作用:
width : ($(this).css('width')) + (ui.value + "%");
I'm new with Javascript I hope you won't be to hard with me. 我是Java语言的新手,希望您不会对我感到厌烦。 Thanks a lot.
非常感谢。
You need to modify this line, from 您需要从以下位置修改此行
$("#image").css({ width : ($(this).css('width')) + (ui.value + "%"); });
to 至
$('#image').css('width',ui.value+'%');
if you remove the last part of the command ( +'%' ) the image will resize in pixels. 如果删除命令的最后部分(+'%'),则图像将以像素为单位调整大小。 Please note that the value of a percentage increase must be greater than 0(where 0 means invisible) however it can go above 100%.
请注意,百分比增加的值必须大于0(其中0表示不可见),但是可以超过100%。 In your example you have set minimum to -50 and maximum to 50.
在您的示例中,您已将最小值设置为-50,将最大值设置为50。
Also with the command $(this).css
, you tried to read the css of the element where events are triggered (slider in this instance) instead of the actual image css 同样,使用命令
$(this).css
,您尝试读取触发事件的元素的CSS(在此例中为滑块),而不是实际的图像CSS。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.