jquery - 使用 css 操作图像大小无法保持原始 y 位置..!

Question

我正在使用 jQuery 创建交互式图形。我有一个 jslider，我想在 slider 的值发生变化时更改图像的大小。它实际上是这样工作的:

 <script>
        jQuery("#SliderSingle2").slider({ from: 2002, to: 2012, step: 1, round: 0,     skin: "round", limits: false, format: { format: '##', locale: 'de' }, scale: ['2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012'],callback: function( value ){
                var SliderValue = $('#SliderSingle2').attr('value');
                if(value== "2003"){
                    $("#img").css("transform","scale(0.9)");
                                            $("#img2").css("transform","scale(1.0)");
                    $("#img3").css("transform","scale(0.7)");
                }else if(value=="2004"){
                        $("#img1").css("transform","scale(1.0)");
                        $("#img2").css("transform","scale(1.0)");
                                            $("#img3").css("transform","scale(0.7)");
}}};
</script>

..当我改变 slider 的值时图像确实会增长..问题是我希望这些图像保持它们在 Y 轴上的位置，那些不能向下增长，图像应该在同一水平/高度一直在页面上.. 因为这些图片否则会覆盖 slider 。我不知道该怎么做..？任何副官..？

-编辑-这些值(value)增长多少将与那一年的数据成正比。我正在尝试绘制该数据，以便当您“可以看到增长/数据变化”时它会产生更大的影响。

Answer 1

只需给图像垂直对齐:底部。

img {
   vertical-align: bottom;
}

那么他们应该保持一致。

编辑:

我想这就是你想要的:

http://jsfiddle.net/gLRck/

我们不使用变换比例，而是设置高度。我还使图像在拖动 handle 时调整大小，而不是在释放鼠标按钮时调整。

编辑编辑:现在它也适用于 chrome ;)