Question

我正在尝试在我的网页上创建一个效果，您点击缩略图，并从缩略图“放大”全尺寸div。我认为使用CSS / Jquery应该是相当直接的：只需将div设置为position：绝对顶部和左侧设置以匹配单击的缩略图，将zoom属性设置为适当的低值（例如.25），以及使用查询animate函数将缩放值设置为1，将top / left值设置为我想要最终图像的位置。这几乎有用，但有一点需要注意：显然缩放CSS不仅缩放了div的大小（及其内容），它还缩放了位置。

所以我的问题是（相对）简单：如何定位“全尺寸”div，其顶部和左侧与缩略图匹配，缩放参数设置为小于1？

编辑1：经过进一步的研究，我发现显然Firefox根本不支持缩放属性，而我在其他浏览器中获得的行为实际上太不一致，所以我转而使用CSS转换/转换。当然，转换属性在IE＆lt; 10上不起作用，但后来也没有其他很多东西，所以我可以忍受。

Answer 1

这是出乎意料的行为。另一种方法是将缩放元素放在另一个具有绝对位置样式的元素中：

$('#content div').animate({
  zoom: 0.2
},2000);

#content {
  position: fixed;
  top: 50px;
  left: 50px;
  border: 1px solid black;
  background: #88e;
  font: 60px verdana;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div>Lorem ipsum</div>
</di>

CSS缩放w /绝对位置

1 个答案: