Question

此网页有三个按钮（红色，蓝色，绿色）。三个图像水平对齐。按下按钮时，相应的彩色图像应放在宽度为400像素的中央（开始时每个宽度）图片是200px）。无论何时按下红色或绿色按钮，图像都放在中心的图像顶部。有人可以提供解决方案

<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

Answer 1

<强>编辑：这是你早期问题的答案。您应该添加'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");
});

Answer 2

听众代码总是：

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

使用javascript改变图像的宽度

2 个答案: