0

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

 <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>

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

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

4

1 回答 1

0

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

img {
   vertical-align: bottom;
}

然后他们应该排队。

编辑：

我认为这就是你想要的：

http://jsfiddle.net/gLRck/

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

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

于 2013-06-02T23:06:35.083 回答