Question

我正在尝试创建一个网站，连续三张图片。当鼠标悬停在图片上时，它的大小会增加。我的问题是，当我将鼠标悬停在第一张图片上时，第二张图片会水平移动，当我将鼠标悬停在第二张图片上时，第三张图片会垂直移动。悬停在第三张图片上工作正常，但我想这是因为它与右边对齐这是我的代码：

$(document).ready(function() {    
    $("#pic1").mouseover(function() {
		$("#pic1").animate({'width': '367px', 'height': '245px'}, 1000);
	});
	$("#pic2").mouseover(function() {
		$("#pic2").animate({'width': '367px', 'height': '245px'}, 1000);
	});
	$("#pic3").mouseover(function() {
		$("#pic3").animate({'width': '367px', 'height': '245px'}, 1000);
	});
	$("#pic1").click(function() {
		$("#pic1").animate({'width': '50px', 'height': '30px'}, 1000);
	});
	$("#pic2").click(function() {
		$("#pic2").animate({'width': '50px', 'height': '30px'}, 1000);
	});
	$("#pic3").click(function() {
		$("#pic3").animate({'width': '50px', 'height': '30px'}, 1000);
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<img class="allShow" id="pic1" style="width: 50px; height:30px" align="left" alt="Flagge der UN" src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Small_Flag_of_the_United_Nations_ZP.svg"/> 
<img class="allShow" id="pic2" style="display: block; margin-left: auto; margin-right: auto; width: 50px; height:30px" alt="Ban Ki-Moon" src="http://www.un.org/sites/www.un.org/files/styles/thumbnail-responsive/public/2014/11/25/secretary-general-ban-ki-moon-speaking-press-conference_01b0a.jpg?itok=yCtESIJq"/>
<img class="allShow" id="pic3" alt="Mitglieder" style="width: 50px; height:30px; margin-top: -30px" align="right" src="http://static1.squarespace.com/static/54c7de19e4b0cece214f32ca/t/54db8f27e4b0512a94d8c06e/1423675177419/UN-flags.jpg?format=1500w" />

Answer 1

我建议使用<table>：

$(document).ready(function() {    
    $("#pic1").mouseover(function() {
		$("#pic1").animate({'width': '367px', 'height': '245px'}, 1000);
	});
	$("#pic2").mouseover(function() {
		$("#pic2").animate({'width': '367px', 'height': '245px'}, 1000);
	});
	$("#pic3").mouseover(function() {
		$("#pic3").animate({'width': '367px', 'height': '245px'}, 1000);
	});
	$("#pic1").click(function() {
		$("#pic1").animate({'width': '50px', 'height': '30px'}, 1000);
	});
	$("#pic2").click(function() {
		$("#pic2").animate({'width': '50px', 'height': '30px'}, 1000);
	});
	$("#pic3").click(function() {
		$("#pic3").animate({'width': '50px', 'height': '30px'}, 1000);
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div style="display: table; width: 1200px">
  <div style="display: table-row">
    <div style="display: table-cell; width: 400px; vertical-align: top">
      <img class="allShow" id="pic1" style="width: 50px; height:30px" align="left" alt="Flagge der UN" src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Small_Flag_of_the_United_Nations_ZP.svg"/> 
    </div>
    <div style="display: table-cell; width: 400px; vertical-align: top; text-align: center;">
      <img class="allShow" id="pic2" style="width: 50px; height:30px" alt="Ban Ki-Moon" src="http://www.un.org/sites/www.un.org/files/styles/thumbnail-responsive/public/2014/11/25/secretary-general-ban-ki-moon-speaking-press-conference_01b0a.jpg?itok=yCtESIJq"/>
    </div>
    <div style="display: table-cell; width: 400px; vertical-align: top; text-align: right;">
      <img class="allShow" id="pic3" alt="Mitglieder" style="width: 50px; height:30px;" src="http://static1.squarespace.com/static/54c7de19e4b0cece214f32ca/t/54db8f27e4b0512a94d8c06e/1423675177419/UN-flags.jpg?format=1500w" />
    </div>
  </div>
</div>

Answer 2

看看transform:scale(x);

img:hover {
  transform: scale(8);
  ;
  transition: 0.5s;
}
img {
  transform-origin: 0 0;
  transition: 99999s;
  /* freeze hover effect */
}
img + img {
  transform-origin: top center;
}
img:last-of-type {
  transform-origin: top right;
}

<p>reload to reset or reset transtion on img</p>
<img class="allShow" id="pic1" style="width: 50px; height:30px" align="left" alt="Flagge der UN" src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Small_Flag_of_the_United_Nations_ZP.svg" />

<img class="allShow" id="pic2" style="display: block; margin-left: auto; margin-right: auto; width: 50px; height:30px" alt="Ban Ki-Moon" src="http://www.un.org/sites/www.un.org/files/styles/thumbnail-responsive/public/2014/11/25/secretary-general-ban-ki-moon-speaking-press-conference_01b0a.jpg"
/>
<img class="allShow" id="pic3" alt="Mitglieder" style="width: 50px; height:30px; margin-top: -30px" align="right" src="http://static1.squarespace.com/static/54c7de19e4b0cece214f32ca/t/54db8f27e4b0512a94d8c06e/1423675177419/UN-flags.jpg" />

让图片保持原样

2 个答案: