使用javascript改變圖像的寬度

-2

此網頁有三個按鈕（紅色，藍色，綠色）。三個圖像水平對齊。當按下按鈕時，對應的彩色圖像應放置在寬度爲400的中心像素（在開始每個圖像的寬度是200像素）。每當紅色或綠色按鈕被按下在放置在存在於centre.Could某人的圖像頂部的圖像提供一種解決方案使用javascript改變圖像的寬度

<html> 
<header> 
<style> 

#red { 
width: 200px; 
height:300px; 
position:absolute; 
left:10px; 
} 
#blue{ 
width: 200px; 
height:300px; 
position:absolute; 
left:500px; 
} 
#green 
{ 
width: 200px; 
height:300px; 
position:absolute; 
right:100px; 
} 

</style> 
</header> 
<body> 
<input type="button" value="Red" id="redButton"></input> 
<input type="button" value="Blue" id="blueButton"></input> 
<input type="button" value="Green" id="greenButton"></input> 
<div id="images"> 
<img id="red" src="red.jpeg" alt="red" /> 
<img id="blue" src="blue.jpeg" alt="blue" /> 
<img id="green" src="green.jpeg" alt="green" /> 
</div> 
</body> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$('#redButton').bind('click', function(event1) 
{ 

$("#red").css({'width':'400px','position':'absolute','left':'400px', 'height':'300px'}); 
$("#blue").css({'width':'200px','position':'absolute','right':'50 px','height':'300px'}); 
$("#green").css({'width':'200px','position':'absolute','left':'50 px','height':'300px'}); 
console.log("Red button clicked"); 
}); 

$('#greenButton').bind('click', function(event2) 
{ 

$("#blue").css({'width':'200px','position':'absolute','right':'50 px', 'height':'300px'}); 
$("#green").css({'width':'400px','position':'absolute','left':'400px','height':'300px'}); 
$("#red").css({'width':'200px','position':'absolute','left':'50 px','height':'300px'}); 
console.log("Green button clicked"); 

}); 

$('#blueButton').bind('click', function(event3) 
{ 

$("#blue").css({'width':'400px','position':'absolute','left':'400px','height':'300px'}); 
$("#red").css({'width':'200px','position':'absolute','left':'50 px','height':'300px' }); 
$("#green").css({'width':'200px','position':'absolute','right':'50 px','height':'300px'}); 
console.log("Blue button clicked"); 
}); 

</script> 
</html>

當頁面已加載： enter image description here

當點擊藍色按鈕時： enter image description here

點擊紅色按鈕時： enter image description here

來源

2014-02-11 Sameer Sarmah

什麼不工作... – epascarello

對不起，但我沒有得到你想要什麼，當你點擊紅色/綠色按鈕..點擊藍色按鈕將增加藍色圖像的大小即可以..但是當我點擊紅色/綠色，然後究竟是什麼你想..？ –

當按下紅色按鈕時，綠色圖像應該左移（'左'：'50 px'），藍色圖像應右移（'右'：'50 px'），紅色圖像應該在雙倍寬度的中心。你可以看到它們在這裏合併。 –

共聽者代碼如下：

<script> 
    $('#redButton').bind('click', function(event1) 
    { 

    $("#red").css({'width':'400px','position':'absolute','left':'400px', 'height':'300px'}); 
    $("#blue").css({'width':'200px','position':'absolute','left':'10px','right':'1000px','height':'300px'}); 
    $("#green").css({'width':'200px','position':'absolute','right':'10px','left':'1000px','height':'300px'}); 
    console.log("Red button clicked"); 
    }); 

    $('#greenButton').bind('click', function(event2) 
    { 

    $("#blue").css({'width':'200px','position':'absolute','right':'10px','left':'1000px', 'height':'300px'}); 
    $("#green").css({'width':'400px','position':'absolute','left':'400px','height':'300px'}); 
    $("#red").css({'width':'200px','position':'absolute','left':'10px','right':'1000px','height':'300px'}); 
    console.log("Green button clicked"); 

    }); 

    $('#blueButton').bind('click', function(event3) 
    { 

    $("#blue").css({'width':'400px','position':'absolute','left':'400px','height':'300px'}); 
    $("#red").css({'width':'200px','position':'absolute','left':'10px','right':'1000px','height':'300px' }); 
    $("#green").css({'width':'200px','position':'absolute','right':'10px','left':'1000px','height':'300px'}); 
    console.log("Blue button clicked"); 
    }); 

    </script>

來源

2014-02-11 06:50:52

編輯： 這是對你剛纔的問題的答案。您應該添加'left':'10px'。（如果你想轉移藍色圖像是在中心留在點擊紅色按鈕）

$('#redButton').bind('click', function(event1) 
{ 

$("#red").css({'width':'400px','position':'absolute','left':'400px', 'height':'300px'}); 
$("#blue").css({'width':'200px','position':'absolute','right':'50 px','left':'10px','height':'300px'}); 
$("#green").css({'width':'200px','position':'absolute','left':'50 px','height':'300px'}); 
console.log("Red button clicked"); 
});

來源

2014-02-11 05:46:48 newTag

我希望藍色圖像右移（綠色放在前面），綠色向左（紅色放在前面），紅色圖像應該放在中間，寬度爲雙倍。 –

好吧，我得到它，最後你的回答是有幫助really.thx。 –

使用javascript改變圖像的寬度

回答

相關問題