Question

我将图片集中在表格单元格中。使用jQuery我做了动画来改变鼠标悬停时的图片大小，但现在我需要在同一个动画中将该图片对齐左边。

我有这个HTML代码：

<th colspan="2" height="100%" id="PoleAlena">
    <img src="./photos/AlenaKoule.png" id="AlenaKoule" style="width:50%;height:50%;">
</th>

然后我有jQuery代码：

$("#PoleAlena").hover (function() {
    $("#AlenaKoule").animate({width: "15%", height: "15%",}, 1000);
});

所以我需要的是：当鼠标悬停表格单元格时，结构尺寸会减小并移动到相同单元格的左上角。

谢谢你的回答。问候 LIBOR

Answer 1

喜欢这个？，可以使用transform和hover代替脚本

＆＃13;

th {
  border: 1px solid gray;
  text-align: left;
}
th img {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  transition: transform 1s;
  transform-origin: left top;
}
th:hover img {
  transform: translateX(-100%) scale(0.4) ;
}

＆＃13;

<table>
  <tr>
    <th colspan="2" height="100%" id="PoleAlena">
      <img src="http://placehold.it/200/f00" id="AlenaKoule" style="width:50%;height:50%;">
    </th>
  </tr>
</table>

＆＃13;

使用jQuery，CSS，HTML5在表格单元格中对图片进行动画对齐

1 个答案: