缩放功能答案

【问题标题】：Zoom Functionality缩放功能
【发布时间】：2012-08-25 12:07:49
【问题描述】：

我的主页上有一张静态背景图片。有一个工具栏，我可以从中将图像拖放到上面讨论的静态背景图像上。现在我需要缩放背景图像的能力，但同时拖放到背景图像顶部的图像也应该缩放并相应地移动它们的位置，就像它只是一个单一的图像一样我在工作。我只需要为 IE 浏览器完成这项工作。我已经尝试过 -ms-zoom 但是拖放的图像似乎根本没有改变它们的位置，因为它们是绝对定位的。 Zoom 内置的浏览器似乎工作得很好，但我们的客户需要页面上的自定义链接来放大和缩小，因为我们只需要页面的特定部分来缩放而不是整个页面。

有什么方法可以满足这个要求吗？

【问题讨论】：

在 jsfiddle.com 上分享并在几分钟内获得答案和点赞

标签： javascript jquery asp.net html internet-explorer

【解决方案1】：

一个简单的zoom 应该像你描述的那样工作。试试这个：

<script>
a=100;
</script>
</head>
<body>
<div id="div" style="position:absolute;z-index:-1;top:50px;left:0px;width:400px;
    height:400px;background:url(some_image.jpg)"
>
    <img src="another_image.png" style="position:absolute; top:50px;left:50px;" />
</div>
<button onclick="a+=50;document.getElementById('div').style.zoom=a+'%';">
Zoom
</button>

【讨论】：

非常感谢！！！它工作完美。 Howewer 在 IE8 上表现不同。可能是 IE8 的错误？
@user984369 我无法在 IE8 中重现任何不同的行为，尽管我只能在 IE9 中模拟 IE8。上面的代码似乎在 IE9 的每个浏览器模式下都能正常工作。另外我过去在真正的 IE8 中使用过zoom，没有任何问题。也许它是你代码中的其他东西？
在某些 IE8 浏览器中它似乎可以工作，而在某些浏览器中则不行。无论如何，您提供的代码真的很有帮助。非常感谢。