Question

当我将它们鼠标悬停时，我有一类想要放大的图像（但保留在原位）。图像大小相同（50x15小，放大到100x30）。我更喜欢平滑的动画效果，我使用jquery动画功能来增加图像大小并调整图像的位置。

HTML：

<table>
<tr>
  <td align="center" valign="top"><div class="magContainer"><img src="images/unprocessed-lg.png" class="blockreqBtn" /></div></td>
</tr>
</table>

CSS：

.magContainer {
  margin: 0px;
  position: relative;
  width: 50px;
  text-align: left;
  border: 1px solid #000000;
}

img.blockreqBtn {
  position: fixed;
  cursor: pointer;
  z-index: 0;
  height: 15px;
  width: 50px;
}

jQuery的：

$(".blockreqBtn").hover(function() {
    // hover in
    $(this).animate({
       height: "30",
       width: "100",
       left: "-=25",
       top: "-=8"
    }, "fast");
}, function() {
    // hover out
    $(this).animate({
        height: "15",
        width: "50",
        left: "+=25",
       top: "+=8"
    }, "fast");
});

我遇到的问题是它在Firefox 10.0中完美运行，但在我测试的所有其他浏览器中都失败了。如果我在IE8，Safari 5.1.4或最新的Chrome中尝试此操作，图像会跳到浏览器窗口的左上角。尺寸调整很好，但为什么我的图像跳出位置？

Answer 1

position:fixed应该相对于浏览器窗口工作，而不是相对于包含元素。删除你的那部分CSS你应该没事。

使用jquery animate放大图片仅适用于Firefox

1 个答案: