用css操作圖像大小未能保持原來的y位置..！

我正在使用jQuery創建交互式圖形..我有一個jslider，並且我想在滑塊的值發生更改時更改圖像的大小。它實際上是這樣工作：用css操作圖像大小未能保持原來的y位置..！

<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軸位置的圖像確實會增大，那些不能向下生長，圖像應始終與頁面上的同一級別/高度..因爲這些圖片否則覆蓋滑塊。我不知道該怎麼做..？任何人vicer ..？

-EDIT- 這些數值增長將與當年的數據成比例..我試圖繪製這些數據，這樣會產生更多效果，當你「看到增長/數據更改「。

來源

2013-05-29 someProgress

你能做出的jsfiddle？ – jah

我不知道是否可以使用jsfiddle來嘗試此操作，因爲我已經下載了jslider，並且在計算機上有這些圖像..？我很新的JavaScript .. – someProgress

http://jsfiddle.net/v3gUg/18/這是jslider jsfiddle的一個例子。只需使用一些來自互聯網的隨機圖片。 – jah

只給圖像vertical-align：bottom。

img { 
    vertical-align: bottom; 
}

然後他們應該保持一致。

編輯：

我想這是你想要什麼：

http://jsfiddle.net/gLRck/

使用變換的規模，我們剛剛設置的高度代替。我還調整了圖像的大小，而不是在釋放鼠標按鈕時拖動手柄。

編輯編輯： 而現在它也可以在Chrome;）

來源

2013-06-02 23:06:35 jah

..很遺憾..那是行不通的。 – someProgress

然後你是不是做得對。如果你讓你的jsfiddle工作，我可以很容易地告訴你，但是否則我不知道發生了什麼。 – jah

http://jsfiddle.net/someProgress/QNLMN/42/我試過這樣..我試了兩個..垂直對齊：底部和中間..靜態圖片將失去定位，並不會保持一致。任何成功？ – someProgress

用css操作圖像大小未能保持原來的y位置..！

回答

相關問題