Question

我使用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轴上的位置，这些图像不能向下生长，图像应该在相同的水平/高度上一直在页面上..因为这些图片覆盖滑块否则。我不知道如何这样做..？任何一个人？？

CNC中那些增长多少的值将与那一年的数据成正比。我试图绘制这些数据，这样当你能看到增长/数据变化时，它会产生更大的影响＆＃ 34; ..

Answer 1

只需将图像设为vertical-align：bottom。

img {
   vertical-align: bottom;
}

然后他们应该保持一致。

修改

我认为这就是你想要的：

http://jsfiddle.net/gLRck/

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

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

用css操纵图像大小未能保持原始的y位置..！

1 个答案: