jQuery ui滑块调整div中的所有元素(jQuery ui slider to resize all elements within a div)

jQuery ui滑块调整div中的所有元素(jQuery ui slider to resize all elements within a div)

真的在挣扎吗？ 我对Jquery很新，并试图绊倒我的方式......

这是我到目前为止http://jsfiddle.net/VUY4p/

我无法弄清楚如何让它工作，我需要所有的div与瓶子图像一起缩放，也要居中，所以当主滑块一直到右边时，视图只是标签区域的大约300px宽的文本，然后当滑块向左移动时，整个瓶子都可见，其他一切都随之缩小，包括与近距离视图相同比例的文本。

我希望这是有道理的，我希望有人可以看看，看错了什么？

当瓶子图像增加时，当字体改变时，文本也会发生奇怪的事情？ 它跳到左边？

really struggling with this ?? I am very new to Jquery and trying to stumble my way through it...

here is what I have so far http://jsfiddle.net/VUY4p/

I cant figure out how to get it to work, I need all the divs to scale with the bottle image and also to be centred, so when the main slider is all the way to the right the view is of just the label area with the text at around 300px wide and then when moving slider to the left the entire bottle is visible and everything else shrinks with it, including the text in the same proportions as the close up view.

i hope this makes sense and I hope someone can take a look and see whats wrong?

Also something strange happens to the text when the font is changed as the bottle image is increased?? it jumps to the left??

最满意答案

这可能会或可能不会帮助你，但我认为重做图像区域可能会更好。 也许其中一些会对你有所帮助。 我认为在答案中发布的代码太多了。

演示： http ： //jsfiddle.net/lucuma/ggC8s/6/

This may or may not help you, but I thought it might be better to redo the image area. Perhaps some of it will help you. I think it is too much code to post in the answer.

Demo: http://jsfiddle.net/lucuma/ggC8s/6/